1. 程式人生 > >javascript-行間樣式

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="變紅" />
<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="變綠" >
<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-行間樣式