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="變紅" />
<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.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="變綠" >
<input type="button" value="變紅" />
<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-行間樣式