怎样通过JS来为网页元素添加CSS样式_IT百科

例如改变背景色：

<div id="changeColor">使用JS改变背景色</div>

var cc = document.getElementById("changeColor")

cc.style.backgoundColor="#000" //将背景色改为黑色

cc.style.fontSize="20px" // 将文字大小改为20px，等号右边也可以写为20+"px"

cc.style.color="#fff" //将文字颜色改为白色

</script>

以此类推即可

JavaScript动态建立或增加CSS样式表，参考如下：

1、简单的方法：

document.createStyleSheet().cssText = '标签{color:red' +

// 这个注释只在当前JS中帮助理解，并不会写入CSS中

'width:300pxheight:150px}' +

'.类名{……}' +

'#ID们{……}'

2、比较完美的方法，防止重复添加，通过添加样式表ID并对其判断来实现：

if (!document.styleSheets['要建立的样式表ID如theforever']) { //先检查要建立的样式表ID是否存在，防止重复添加

var ss = document.createStyleSheet()

ss.owningElement.id = '要建立的样式表ID如theforever'

ss.cssText = '标签{display:inline-blockoverflow:hidden' +

// 这个注释只在当前JS中帮助理解，并不会写入CSS中

'text-align:leftwidth:300pxheight:150px}' +

'.类名{……}' +

'#ID们{……}'

}

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

function renderLink(){

var alist = document.getElementsByClassName("mya")

if(alist){

for(var idx = 0 idx < alist.length idx ++){

var mya = alist[idx]

mya.style.color = "red"

mya.style.fontSize = "36px"

}

</script>

先用document.getElementsByClassName("className")取得所有class为className的元素，再循环添加样式即可，如果用JQuery会简单很多；也可以自己用JS封装一个函数实现JQuery一样的效果

欢迎分享，转载请注明来源：内存溢出

怎样通过JS来为网页元素添加CSS样式