首页 > 代码库 > javascript-行间样式
javascript-行间样式
1、行间样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 200px;height: 200px;border: 1px solid black;}
</style>
<script>
function toRed()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.style.background=‘red‘; ---> style操作行间样式
}
</script>
</head>
<body>
<input type="button" value="http://www.mamicode.com/变红" />
<div id="div1"></div> ---> <div id="div1" style="background: red none repeat scroll 0% 0%;"></div>
</body>
</html>
2、样式优先级带来的问题
通配符* < 标签 < class < id < 行间样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 200px;height: 200px;border: 1px solid black;}
.color_green {background: green}
</style>
<script>
function toRed()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.style.background=‘red‘;
// oDiv.className=‘.color_green‘;
}
function toGreen()
{
var oDiv=document.getElementById(‘div1‘);
//oDiv.style.background=‘red‘;
oDiv.className=‘color_green‘;
}
</script>
</head>
<body>
<input type="button" value="http://www.mamicode.com/变绿" >
<input type="button" value="http://www.mamicode.com/变红" />
<div id="div1"></div>
</body>
</html>
先变绿，再变红；有效
<div id="div1"></div> --> <div id="div1" class="color_green"></div> ---> <div id="div1" class="color_green" style="background: red none repeat scroll 0% 0%;"></div>
先变红，再变绿；失效
<div id="div1"></div> --> <div id="div1" style="background: red none repeat scroll 0% 0%;"></div> ---> <div id="div1" style="background: red none repeat scroll 0% 0%;" class="color_green"></div>
建议：一直使用同一个class或者style
javascript-行间样式