hujung hadapan web
tutorial js
JS mendapat gaya CSS (style/getComputedStyle/currentStyle)_javascript kemahiran
JS mendapat gaya CSS (style/getComputedStyle/currentStyle)_javascript kemahiran
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®">
<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");
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.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
36
110
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
