hujung hadapan webtutorial jsJS mendapat gaya CSS (style/getComputedStyle/currentStyle)_javascript kemahiranJS 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.
Python vs JavaScript: Analisis Perbandingan untuk PemajuMay 09, 2025 am 12:22 AMPerbezaan utama antara Python dan JavaScript ialah sistem jenis dan senario aplikasi. 1. Python menggunakan jenis dinamik, sesuai untuk pengkomputeran saintifik dan analisis data. 2. JavaScript mengamalkan jenis yang lemah dan digunakan secara meluas dalam pembangunan depan dan stack penuh. Kedua -duanya mempunyai kelebihan mereka sendiri dalam pengaturcaraan dan pengoptimuman prestasi yang tidak segerak, dan harus diputuskan mengikut keperluan projek ketika memilih.
Python vs JavaScript: Memilih alat yang sesuai untuk pekerjaanMay 08, 2025 am 12:10 AMSama ada untuk memilih Python atau JavaScript bergantung kepada jenis projek: 1) Pilih Python untuk Sains Data dan Tugas Automasi; 2) Pilih JavaScript untuk pembangunan front-end dan penuh. Python disukai untuk perpustakaannya yang kuat dalam pemprosesan data dan automasi, sementara JavaScript sangat diperlukan untuk kelebihannya dalam interaksi web dan pembangunan stack penuh.
Python dan javascript: memahami kekuatan masing -masingMay 06, 2025 am 12:15 AMPython dan JavaScript masing -masing mempunyai kelebihan mereka sendiri, dan pilihan bergantung kepada keperluan projek dan keutamaan peribadi. 1. Python mudah dipelajari, dengan sintaks ringkas, sesuai untuk sains data dan pembangunan back-end, tetapi mempunyai kelajuan pelaksanaan yang perlahan. 2. JavaScript berada di mana-mana dalam pembangunan front-end dan mempunyai keupayaan pengaturcaraan tak segerak yang kuat. Node.js menjadikannya sesuai untuk pembangunan penuh, tetapi sintaks mungkin rumit dan rawan kesilapan.
Inti JavaScript: Adakah ia dibina di atas C atau C?May 05, 2025 am 12:07 AMJavascriptisnotbuiltoncorc; it'saninterpretedlanguagethatrunsonenginesoftenwritteninc .1) javascriptwasdesignedasalightweight, interpratedlanguageforwebbrowsers.2)
Aplikasi JavaScript: Dari Front-End ke Back-EndMay 04, 2025 am 12:12 AMJavaScript boleh digunakan untuk pembangunan front-end dan back-end. Bahagian depan meningkatkan pengalaman pengguna melalui operasi DOM, dan back-end mengendalikan tugas pelayan melalui Node.js. 1. Contoh front-end: Tukar kandungan teks laman web. 2. Contoh backend: Buat pelayan Node.js.
Python vs JavaScript: Bahasa mana yang harus anda pelajari?May 03, 2025 am 12:10 AMMemilih Python atau JavaScript harus berdasarkan perkembangan kerjaya, keluk pembelajaran dan ekosistem: 1) Pembangunan Kerjaya: Python sesuai untuk sains data dan pembangunan back-end, sementara JavaScript sesuai untuk pembangunan depan dan penuh. 2) Kurva Pembelajaran: Sintaks Python adalah ringkas dan sesuai untuk pemula; Sintaks JavaScript adalah fleksibel. 3) Ekosistem: Python mempunyai perpustakaan pengkomputeran saintifik yang kaya, dan JavaScript mempunyai rangka kerja front-end yang kuat.
Rangka Kerja JavaScript: Menguasai Pembangunan Web ModenMay 02, 2025 am 12:04 AMKuasa rangka kerja JavaScript terletak pada pembangunan yang memudahkan, meningkatkan pengalaman pengguna dan prestasi aplikasi. Apabila memilih rangka kerja, pertimbangkan: 1.
Hubungan antara JavaScript, C, dan penyemak imbasMay 01, 2025 am 12:06 AMPengenalan Saya tahu anda mungkin merasa pelik, apa sebenarnya yang perlu dilakukan oleh JavaScript, C dan penyemak imbas? Mereka seolah -olah tidak berkaitan, tetapi sebenarnya, mereka memainkan peranan yang sangat penting dalam pembangunan web moden. Hari ini kita akan membincangkan hubungan rapat antara ketiga -tiga ini. Melalui artikel ini, anda akan mempelajari bagaimana JavaScript berjalan dalam penyemak imbas, peranan C dalam enjin pelayar, dan bagaimana mereka bekerjasama untuk memacu rendering dan interaksi laman web. Kita semua tahu hubungan antara JavaScript dan penyemak imbas. JavaScript adalah bahasa utama pembangunan front-end. Ia berjalan secara langsung di penyemak imbas, menjadikan laman web jelas dan menarik. Adakah anda pernah tertanya -tanya mengapa Javascr
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
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
