您的位置:首页> 前端教程> CSS操作

cssText 属性

2018-9-2 01:17| 作者: admin| 查看: 2632| 评论: 0|来自: 蚂蚁部落

元素对象的style属性大家都比较非常熟悉,利用它可以设置或者返回CSS属性值。

使用方式简单,应用频繁,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.style.width="200px";
  odiv.style.height="100px";
  odiv.style.backgroundColor="color";
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上述代码设置div元素长宽分别为200px和100px,背景颜色为红色。

关于style属性更多内容参阅JavaScript style 属性一章节。

还有一种方式可以实现相同的效果,应用方式也非常类似,那就是本文主角cssText属性。

style一次只能设置一个CSS样式属性值,而cssText可以一次设置多个样式属性值。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.style.cssText = "width:200px;height:100px;background-color:red;";
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

效果与使用style属性逐条设置一样。

cssText属性也可以返回设置的CSS样式,与style属性类似,并不是所有的CSS样式都可以返回。

能够获取的样式如下:

(1).dom对象的style或者cssText设置的样式。

(2).内部样式表设置的样式。

如果想要畅通无阻的获取样式属性值,可以使用getComputedStyle方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#ant{
  color:blue;
  width:200px;
  height:100px;
}
</style> 
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.innerHTML = odiv.style.cssText;
}
</script>
</head>
<body>
  <div id="ant" style="background-color:red;"></div>
</body>
</html>

上述代码只会获取通过内联样式表设置的CSS样式,不会获取内部样式表设置的CSS样式。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#ant{
  color:blue;
}
</style> 
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.style.cssText="width:200px;height:100px;";
  odiv.innerHTML = odiv.style.cssText;
}
</script>
</head>
<body>
  <div id="ant" style="background-color:red;"></div>
</body>
</html>

代码的表现有点奇怪,只获取通过cssText设置样式,内联方式设置的背景没有获取到。

原理解析如下:

(1).内联style方式设置背景颜色,内部会创建一个CSSStyleDeclaration对象。

(2).当文档内容完全加载完毕后,执行odiv.style.cssText="width:200px;height:100px;",又一次创建CSSStyleDeclaration对象,会覆盖前一次创建的对象。

(3).dom.style.color="red"或者dom.style.cssText="color:red;width:200px"等类似操作只是修改CSSStyleDeclaration对象的样式属性,而不是全新创建CSSStyleDeclaration对象。

更多CSS操作相关内容可以参阅如下两篇文章:

(1).CSSStyleDeclaration对象一章节。

(2).CSSStyleSheet 对象详解一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部