javascript学习笔记——cssText使用方法与释义
cssText 本质是什么？
cssText 的本质就是设置 HTML 元素的 style 属性值。
cssText 怎么用？
复制代码 代码如下:
document.getElementById(“d1”).style.cssText = “color:red; font-size:13px;”;
看了这个示例后，相信不说，也知道 style.cssText 是什么意思了，它就是设置 HTML 元素的 style 属性。
注意特殊情况：
cssText是在行内添加样式
比如:
[php]
<div id="test">
测试cssText属性
</div>
[/php]
当我们使用
var oDiv = document.getElementById(‘test’);
oDiv.style.cssText = “width:500px;height:500px”;
改变div的css样式时，这时候我们是将样式添加到了行内，相当于
[php]
<div id="test" style="width:500px;height:500px">
测试cssText属性
</div>
[/php]
如果再来一个按钮，再次使用cssText改变样式
[php]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cssText</title>
<style>
#test{
style="width:200px;height:100px;border:1px solid #000;"
}
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById(‘test’);
var oBtn = document.getElementById(‘btn’);
oDiv.onclick = function (){
oDiv.style.cssText = "width:500px;height:500px";
}
oBtn.onclick = function (){
oDiv.style.cssText = "width:200px";
}
}
</script>
</head>
<body>
<div id="test">
测试cssText属性
</div>
<input type="button" value="按钮" id="btn" />
</body>
</html>
[/php]
这时候， 按钮点击事件会将上一个的cssText覆盖掉，但是不会覆盖上面#test的样式，如果我们将#test的样式改成行内
[php]
<div id="test" style="width:200px;height:100px;border:1px solid #000;">
测试cssText属性
</div>
[/php]
那同样点击按钮会完全覆盖掉行内样式
还没有任何评论，你来说两句吧