JavaScript是如何改变网页的CSS样式的？
通常我们将网页的样式和内容分开，样式放在css文件，内容放在html文件，当html文件需要用到样式的时候，直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。
1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如：
myElement.sytle.color = “red”;
myElement.sytle.left = “40px”;
myElement.sytle.backgroundRepeat = “repeat-x”;
JavaScript设置内联样式时，采用和css设置样式一样的风格。如设置myElement的color属性时，我们可以赋值任何在css中可以用的值，所以这里除了可以使用”red”，还可以使用”巧缓森blue”, ”yellow”或十六进制的”#ff0000”。哪扒
另外用JavaScript改变网页的属性还需要注意2点：
l JavaScript中采用驼峰命名法：在css中，属性名中的单词之间是用横杠隔开，如font-weight, background-color。但在JavaScript中，横杠可能被认为是减号，所以采用驼峰命名法，单词之间不用横杠，如font-weight在JavaScript中应该写成fontWeight;而background-color写成backgroundColor。
l JavaScript中属性值为字符串：在css中，属性值都写在双引号中，即要用字符串来给css相关属性赋值，同样当属性值有单位时，我们需要将单位也写在字符串中。
2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了，我们也可以用JavaScript直接用定义好的css样式。如下格式：
myElement.className = “someCSSclass”;
同孝亩样需要注意几点：
l 不要将className写成class，因为class是JavaScript保留的关键字，我们不能使用。
l 将定义在css中的样式直接赋值给className，就能改变myElement元素的样式。
l 当要删除元素的样式，可以给className属性赋值为空。如：
myElement.className = “”;
教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容，可以看看，希望对你有帮助。
如何在JS中定义CSS
var domObj = document.getElementById(“tagId”);
//使用domObj.style来设置css：
domObj.style.backgroundColor=”#000″;//对应style里 background-color
domObj.style.fontSize=”#000″;//对应style里 font-size
//如果对这个表不太清楚可以在厅镇w3c上查一下
//但是一般有个规律就是，首单词小写 “-”后面扮岁粗的第一个字母大写，如：font-size 就是fontSize
如果是想更雀拦换标签的class的话，可以使用
domObj.className = “other_class”;
怎样通过JS来为网页元素添加CSS样式
例如改变背穗磨景色：
div id=”changeColor”使用JS改变背景色/div
script
var cc = document.getElementById(“changeColor”);
cc.style.backgoundColor=”#000″; //将背景色岩宽改为黑色
cc.style.fontSize=”20px”; 粗族亮// 将文字大小改为20px，等号右边也可以写为20+”px”
cc.style.color=”#fff”; //将文字颜色改为白色
/script
以此类推即可
如何用JavaScript实现动态修改CSS样式表
方法一、使用obj.className来修改样式表的类名
方法二、使用obj.style.cssText来修改嵌入式的css
function changeStyle2() {
var obj = document.getElementById(“btnB”);
并圆 obj.style.cssText 枯宏= “没蔽册background-color:black; display:block;color:White;
}
javascript怎么操作css？
例子：
htmlheadtitle动态改变文字颜色 /title旅猛仿
style type=”text/css”
body { background-color: pink;
font-size: 22pt;
font-weight: bold;
}
.red { color:rgb(255,0,0);
font-style: italic;
font-size: 32;
}
.blue { color:blue;
font-size: 36;
}
.green { color: green;
font-size: 40;
}
.yellow { color: yellow;
font-size: 45;
}
/style
script language=”javascript”
function init(){
div1=document.getElementById(“first”);
div2=document.getElementById(“second”);
div3=document.getElementById(“third”);
div4=document.getElementById(“fourth”);
}
function colorText(){
div1.style.left = 50;
div1.style.top = 50;
div1.className=”red”;
div2.style.left = 100;
div2.style.top = 100;
div2.className=”blue”;
div3.style.left = 150;
div3.style.top = 150;
div3.className=”green”;
div4.style.left = 200;
div4.style.top = 200;
div4.className=”yellow”;
}
/script
/head
body onLoad=”init()”
div id=”first” style=”position:absolute; top:50px”戌鼓断人行，秋边一雁声。/div
div id=”second” style=”position:absolute; top:100px”露从今夜白，月是故乡明。/div
div id=”third” style=”position:absolute; top:150px”有弟皆分散，无家问死生。拆纤/div
div id=”fourth” style=”position:absolute; top:200px”知塌有弟皆分散，无家问死生。/div
form
input type=”button” value=”移动文字位置并改变样色” onClick=”colorText()”
/form
/body
微信扫一扫 
支付宝扫一扫 
