jquery动态添加样式

Posted 2023-05-08

我的意思是
我只是动态添加一个按钮，样子是没有经过样式美化过的
而通过$("#btn").button()是美化过的

怎么动态添加美化过按钮

添加CSS的方式有行内式、嵌入式、外链式、导入式
a)动态引入样式表文件：
function loadLink(url)
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
var head = document.getElmentsByTagName("head")[0];
head.appendChild(link);

b)嵌入式：
function insertStyles()
var doc,cssCode=[],cssText;
var len = arguments.length;
var head,style,firstStyle;
if(len == 1)
doc = document;
cssCode.push(arguments[0])
else if(len == 2)
doc = arguments[0];
cssCode.push(arguments[1]);
else
alert("函数最多接收两个参数！");

head = doc.getElementsByTagName("head")[0];
styles= head.getElementsByTagName("style");
if(styles.length == 0)
if(doc.createStyleSheet)//ie
doc.createStyleSheet();
else//FF
var tempStyle = doc.createElement("style");
tempStyle.setAttibute("type","text/css");
head.appendChild(tempStyle);


firstStyle = styles[0];
cssText=cssCode.join("\\n");
if(!+"\\v1")//opacity兼容
var str = cssText.match(/opacity:(\\d?\\.\\d+);/);
if(str!=null)
cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")");


if(firstStyle.styleSheet)
firstStyle.styleSheee.cssText += cssText;
else if(doc.getBoxObjectFor)
firstStyle.innerhtml += cssText;
else
firstStyle.appendChild(doc.createTextNode(cssText));


c)行内式：
var addStyle=function (ele,str)
var s = ele.getAttribute("style"),styles;
if(str && typeof str === "string")
if(!s)
ele.style.cssText = str;
else
if(s == \'[object]\')//IE6/7 e.getAttribute("style")返回[object]
s=ele.style.cssText;

styles= trim(s).split(";");
for (var i=0,len=styles.length; i<len; i++)
var style_i=trim(styles[i]);
var attr=style_i.split(":")[0];
if(str.indexOf(attr)>-1)
styles[i]="";
else
styles[i]=style_i;


ele.style.cssText= styles.join("")+";"+str;



d)导入式：
import "index.css";

操作CSS 类相关的方法：
var hasClass=function(ele,value)
var rclass = /[\\n\\t\\r]/g,
value=" "+value+" ";
return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1;

var trim=function (val)
return val.replace(/(^\\s+)|(\\s+$)/g,"");

var addClass=function(ele,value)
var rspace = /\\s+/,classNames,getClass;
if(value&&typeof value === "string")
classNames = value.split(rspace);
if(ele.nodeType === 1)
if(!ele.className && classNames.length == 1)
ele.className = value;
else
getClass = " "+ele.className+" ";
for(var i=0,len=classNames.length; i<len ;i++)
var cname=classNames[i];
if(!hasClass(ele,cname))
getClass += cname+" ";


ele.className = trim(getClass);





var removeClass=function(ele,value)
var rclass = /[\\n\\t\\r]/g,classNames,getClass;
if((value&&typeof value === "string")||value === undefined)
classNames = (value||"").split(rspace);
if(ele.nodeType === 1 && ele.className)
if(value)//存在查找要移除的类
getClass = " "+ele.className+" ".replace(rclass," ");//左右空格，为了使类中各类间均等，方便后面替换
for(var i=0,len=classNames.length; i<len; i++)
getClass = getClass.replace(" "+classNames[i]+" "," ")

ele.className=trim(getClass);
else//不存在移除所有类
ele.className = "";




var toggleClass=function(ele,value)
if(typeof value === "string")
if(hasClass(ele,value))
removeClass(ele,value);
else
addClass(ele,value);


参考技术A 动态添加的用 id来绑定么，你添加一个动态的("<input type=\\"buttom\\" id=\\"btn\\" value=\\"测试\\"\\>"
可以添加一个 class='btn'啊，然后用class 选择器
 $(".btn").button()
这样就新增加的 button 会自动去找class的样式的

本回答被提问者采纳 参考技术B //添加按钮
$("#div1").append($("<input type=\\"buttom\\" id=\\"btn\\" value=\\"测试\\""));
//添加样式
$("#btn").addClass("color","red");

参考技术C $("#btn").addClass(“样式名称”)追问

可是这个#btn是我动态添加上去的

将 css 样式添加到动态生成的项目（jquery，css）

【中文标题】将 css 样式添加到动态生成的项目（jquery，css）

【英文标题】：Adding css styles to dynamically generated items (jquery , css)

【发布时间】：2013-05-08 13:39:06

【问题描述】：

我在为动态生成的项目设置样式时遇到问题。这是网格项目的示例。

我需要按特定顺序向网格行添加不同的类（样式）。第一行是灰色的，接下来的两行是蓝色的，接下来的两行是灰色的，依此类推。 我不知道该怎么做。也许有一些 jquery 选择器？

【问题讨论】：

table row:nth-child(3) background: blue 在你的 CSS 中应该这样做，即使是动态插入的元素？

@adeneo 它只会选择第三个块。我不认为nth-child 在这里会有所帮助

图片不错，但是html是什么样子的？

您可以在生成对象时分配类，然后在 css 中相应地设置类的样式。正如您所说，因为您动态生成它。是的 - 通过向我们展示一些代码 - 我们更有可能得到一些具体的建议 =)

感谢回复。关于代码.. 我将使用 asp:repeater 控件，生成的 html 代码将如下所示：item1 item2 等等。

【参考方案1】：

尝试一些类似的东西

var classes = ['grey', 'blue', 'blue', 'green', 'red'];

var els = $('<div />').text(4).appendTo('#x');

$(els).addClass(function(index, cl)
    return classes[ $(this).index() % classes.length ]
)

演示：Fiddle