JS设置样式的替代方法、静态获取.动态获取、元素命名规范

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 = /^$/;

JS设置样式的替代方法、静态获取.动态获取、元素命名规范

1、设置样式的替代方法

2、获取样式的其他方式（静态、动态获取）

3、获取元素命名规范（六种）

猜你喜欢