1、设置样式的替代方法
通过js来操作类名,来实现css的批量操作
写样式的时候能用CSS写的不用JS写,因为CSS加载比JS快;
<style>
#box{
width: 100px;
height: 100px;
background-color: #ccc;
}
#box.on{
float: right;
background-color: blue;
padding: 20px;
}
</style>
<body>
<div id='box'></div>
</body>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(){
this.className = 'on';
}
</script>
cssText----操作的是行外样式,和css一样的写法,操作的是行内样式
var oBox = document.getElementById('box');
/* 覆盖掉原来的行内样式 */
oBox.style.cssText = 'width: 100px;height: 100px; background-color:red;';
/* 在原来的基础上加上样式 */
oBox.style.cssText += 'width: 100px;height: 100px; background-color:red;';
2、获取样式的其他方式(静态、动态获取)
获取样式的其他方式
/* ById */
var oBox = document.getElementById('Box'); //兼容所有
var aBox = document.getElementsByClassName('c1'); //IE8以上
var aBox = document.getElementsByTagName('div');//兼容所有
/*querySelector 兼容IE8以上浏览器 */
/*通过选择器获取,跟css的选择器一样,不是类数组,选择第一个*/
var obox = document.querySelector("#box");
/* 返回类数组 */
var abox = document.querySelectorAll(".cl");
静态动态获取
1、getElementById
<style>
#box{
width: 100px;
height: 100px;
backroung-color: green;
}
</style>
<body>
<div id="box" class='dv'></div>
</body>
<script>
var oBox = document.getElementById('box');
oBox.id = 'dashui';
oBox.style.backgrounColor = 'deepink';
</script>
2、querySelector
var oBox = document.querySelector('.dv');
oBox.className = 'dashui';
oBox.style.backgroundColor = 'deeppink';
3、querySelectorAll
var aBox = document.querySelectorAll('.dv');
aBox[0].id = 'dashui';
aBox[0].style.backgroundColor = 'deeppink';
动态获取
1、getElementsByClassName
<style>
#box p{
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
</style>
<body>
<div id='box'>
<p class='p1'>1</p>
<p class='p1'>2</p>
<p class='p1'>3</p>
</div>
</body>
<script>
var oBox = document.getElementById('box');
var aBox = document.getElementsByClassName('p1');
console.log(aBox.length);
oBox.innerHTML += "<p class='p1'>4</p>";
console.log(aBox.length);
</script>
2、getElementsByTagName
<style>
#box p{
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
</style>
<body>
<div id='box'>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
<script>
var oBox = document.getElementById('box');
var aBox = document.getElementsByTagName('p');
console.log(aBox.length);
oBox.innerHTML += "<p>4</p>";
console.log(aBox.length);
</script>
运行结果图:
3、获取元素命名规范(六种)
a:表示数组array,但是数组或是类数组的时候通常使用a开头命名
var aName = ['椰汁','我的','从v','测温'];
o:表示对象Object,
var oBox = document.getElementById('box');
s:表示字符串string
var sName = '楠楠';
b:表示布尔值
var bSex = 'true';
fn:表示函数
var fnName = function(){}
re:表示正则Regular Express
var reID = /^$/;