首页 » JavaScript » 正文

javascript学习笔记——cssText使用方法与释义

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2017-2-16 ·  5,564 views  ·  0 replies 

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] 那同样点击按钮会完全覆盖掉行内样式

«上一篇: :下一篇»

0 thoughts on “javascript学习笔记——cssText使用方法与释义”

  1. 还没有任何评论,你来说两句吧

Leave a reply