如何用JS控制CSS基本样式
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
如何用JS控制CSS基本样式
用JS控制CSS基本样式的方法
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
window.onload=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
(2)
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="..."),看一下代码
XML/HTML代码
alert(document.getElementById("css88").style.width);//200px
alert(document.getElementById("css88").style.color);//空白
上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。
从alert出来的信息可以看到,document.getElementById("css88").style方法获取不到class为ss的属性和值。
那么这么样才能获取到class为ss的属性和值呢?
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。
网上一个比较方法是:
XML/HTML代码
sdf
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, "-$1");
propprop = prop.toLowerCase ();
return document.defaultView.getComputedStyle
(obj,null)[prop];
}
return null;
}
var dd=document.getElementById("qq");
alert(GetCurrentStyle(dd,"width"));
当然,如果您是引用外部的css文件同样适用。
另:可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE 和DOM,设置参数:元素对象、样式特性
return