Rumah >hujung hadapan web >tutorial js >JS mendapat gaya CSS (style/getComputedStyle/currentStyle)_javascript kemahiran

JS mendapat gaya CSS (style/getComputedStyle/currentStyle)_javascript kemahiran

WBOYasal: 2016-05-16 15:19:191267semak imbas

Gaya CSS dibahagikan kepada tiga kategori:
Gaya sebaris: ditulis dalam Teg dan gaya sebaris hanya sah untuk semua Teg.
Gaya dalaman: ditulis dalam HTML dan gaya dalaman hanya sah untuk halaman web di mana ia berada.
Helaian gaya luaran: Jika banyak halaman web perlu menggunakan gaya (Gaya) yang sama, tulis gaya (Gaya) dalam fail CSS dengan akhiran .css, dan kemudian tambahkannya ke setiap halaman Rujuk fail CSS ini dalam halaman web yang perlu menggunakan gaya ini (Gaya).

getComputedStyle ialah kaedah yang boleh mendapatkan semua nilai sifat CSS terpakai terakhir bagi elemen semasa. Apa yang dikembalikan ialah objek gaya CSS ([objek CSSStyleDeclaration])
currentStyle ialah harta pelayar IE dan mengembalikan objek gaya CSS

elemen merujuk kepada objek DOM yang diperolehi oleh JS
element.style //Hanya boleh mendapatkan gaya terbenam
element.currentStyle //Pelayar IE memperoleh gaya bukan terbenam
window.getComputedStyle(elemen, pseudo-class) //Pelayar bukan IE mendapat gaya bukan terbenam
document.defaultView.getComputedStyle(elemen, pseudo-class)//Pelayar bukan IE mendapat gaya bukan terbenam
Nota: Sebelum Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), parameter kedua "pseudo-class" diperlukan (jika bukan pseudo-class, ditetapkan kepada null), parameter ini kini boleh ditinggalkan.

HTML berikut mengandungi dua gaya css Div dengan teg id ialah gaya sebaris dan div dengan ujian id ialah gaya dalaman.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus&reg;">
    <meta name="Author" content="Yvette Lau">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>
      #test{
        width:500px;
        height:300px;
        background-color:#CCC;
        float:left;
      }
    </style>
  </head>
  <body>
    <div id = "test"></div>
    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
  </body>
</html>

Bahagian JS

<script type = "text/javascript">
  window.onload = function(){
    var test = document.getElementById("test");
    var tag = document.getElementById("tag");

    //CSS样式对象:CSS2Properties{},CSSStyleDeclaration
    console.log(test.style); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{} 
    console.log(tag.style); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
    //element.style获取的是内嵌式的style，如果不是内嵌式，则是一个空对象

    console.log(tag.style.backgroundColor);//pink
    console.log(tag.style['background-color']);//pink
    //获取类似background-color,border-radius,padding-left类似样式的两种写法啊

    console.log(test.currentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
    console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}
    console.log(window.getComputedStyle(test))
    //效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

    console.log(test.currentStyle.width);//500px(IE)
    console.log(window.getComputedStyle(test).width); //500px;
    console.log(window.getComputedStyle(test)['width']);//500px;
    //document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]   
  }
</script>

Contoh di atas hanya untuk mengesahkan sama ada perbincangan sebelumnya adalah betul.

Untuk kesederhanaan, kami juga boleh membuat enkapsulasi ringkas bagi gaya pemerolehan.

function getStyle(element, attr){
      if(element.currentStyle){
        return element.currentStyle[attr];
      }else{
        return window.getComputedStyle(element,null)[attr];
      }
    }
    console.log(getStyle(test,"cssFloat"));//left
    console.log(getStyle(test,"float"));  //left,早前FF和chrome需要使用cssFloat，不过现在已经不必
    console.log(getStyle(test,"stylefloat"));//火狐和谷歌都是undefined
    console.log(getStyle(test,"styleFloat")); //IE9以下必须使用styleFloat，IE9及以上,支持styleFloat和cssFloat

    console.log(window.getComputedStyle(test).getPropertyValue("float"))

Sesuai dengan gaya apungan, IE menggunakan styleFloat, manakala FF dan chrome sebelum ini menggunakan cssFloat Sekarang FF dan Chrome sudah menyokong apungan, dan terdapat beberapa atribut lain saya tidak akan menyenaraikannya satu demi satu ingat perbezaan ini, kami memperkenalkan dua kaedah untuk mengakses objek gaya CSS:
kaedah getPropertyValue dan kaedah getAttribute

IE9 dan penyemak imbas lain (getPropertyValue)
window.getComputedStyle(elemen, null).getPropertyValue("float"); element.currentStyle.getPropertyValue(“float”); getPropertyValue tidak menyokong notasi huruf unta. (Serasi dengan IE9 dan ke atas, FF, Chrom, Safari, Opera)
Contohnya: window.getComputedStyle(elemen,null).getPropertyValue("warna latar belakang");

Untuk IE6~8, anda perlu menggunakan kaedah getAttribute untuk mengakses atribut objek gaya CSS

element.currentStyle.getAttribute("float");//Tidak perlu lagi ditulis sebagai styleFloat

element.currentStyle.getAttribute("backgroundColor");//Nama atribut perlu ditulis dalam kes unta, jika tidak, IE6 tidak menyokongnya Jika anda mengabaikan IE6, anda boleh menulisnya sebagai "warna latar belakang"

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu pembelajaran semua orang dan menggunakan JS dengan mudah untuk mendapatkan gaya CSS.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Belajar corak reka bentuk JavaScript Kemahiran pattern_javascript pemerhatiArtikel seterusnya：Belajar corak reka bentuk JavaScript Kemahiran pattern_javascript pemerhati

Artikel berkaitan

Lihat lagi