99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

原生JS獲取HTML樣式并修改的方法步驟詳解

發(fā)布時(shí)間：2017-02-16 16:26  回復(fù):0  查看:2468   最后回復(fù)：2017-02-16 16:26  

大家都知道在JavaScript原生操作中獲取元素的樣式，在實(shí)際操作使用時(shí)是比較頻繁的一件事，這里向大家介紹下獲取css樣式的方法，希望可對(duì)大家學(xué)習(xí)javascript有所幫助。


一、 行內(nèi)元素樣式獲取：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js獲取外部樣式</title>

</head>

<body>

    <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>

</body>

<script>

    //獲取行間樣式

    var div = document.getElementById('div');

    var width = div.style.width;

    alert(width);//200px

</script>

</html>

在JS代碼中，alert會(huì)彈出div元素的width為200px；達(dá)到了要獲取元素寬度的目的，但是這種簡(jiǎn)單的方法只適用于獲取元素的行內(nèi)元素樣式，并不能獲取內(nèi)部樣式和外部樣式，在項(xiàng)目中，寫入行內(nèi)元素這種方案并不被大家認(rèn)同，所以這種方法，只是讓大家了解下。


二、 非行間樣式元素獲?。?/span>


如果元素樣式并非行間樣式，利用上面這種方法并不能獲取到元素的樣式，需要使用另一種方法：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js獲取內(nèi)部部樣式</title>

    <style>

        #div{

            width: 200px;

            height: 200px;

            border:3px solid cyan;

        }

    </style>

</head>

<body>

    <div id="div""></div>

</body>

<script>

    var div = document.getElementById('div');

    //獲取div的width

    var width = window.getComputedStyle(div,null).width;

    alert(width);//200px

    //修改div的width

    div.style.cssText='width:300px;'

</script>

</html>

在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐 谷歌 IE9 獲取的為計(jì)算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,并不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.


三 、兼容性:


前段潛規(guī)則,凡是好的東西都不能通用,是的,你猜對(duì)了,任性的IE并不能使用以上方法,但是IE有自己的方法為currentStyle,用法一樣,就不再贅述了,下面直接寫出已經(jīng)處理兼容的代碼如下:


var div = document.getElementById('div');

if (div.currentStyle) {

    console.log(div.currentStyle.width);

}else{

　　console.log(getComputedStyle(div,null).width);

}

方法封裝:


function getStyle(obj,name){

    if (obj.currentStyle) {

        return obj.currentStyle[name];

    }else{

        return getComputedStyle(obj,false)[name];

    }

}


來(lái)源：博客園


您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?