JavaScript新增樣式規(guī)則(推薦)
關(guān)鍵代碼如下所示:
<html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css">
<script>
window.onload=function(){
var sheet=document.styleSheets[0];
//【新增樣式規(guī)則】
// sheet.insertRule('.div1{font-size:16px;color:red;}',0); IE8及以上不支持 //第一個(gè)參數(shù)是樣式,第二個(gè)是樣式的位置
// sheet.addRule('.div1','font-size:20px;color:orange;font-weight:bold;',0); //IE都支持 //第一個(gè)參數(shù)是樣式名,第二個(gè)樣式位置是樣式規(guī)則,第三個(gè)是樣式位置
function insertCss(element,csName,position){ //跨瀏覽器兼容
if(sheet.insertRule){ // sheet.insertRule 非IE的時(shí)候會(huì)讀取到一個(gè)函數(shù),IE8即以上的時(shí)候會(huì)讀取到undefined
sheet.insertRule(element+'{'+csName+'}',position);
}else if(sheet.addRule){
sheet.addRule(element,csName,position);
}
}
insertCss('.div1','font-size:16px;color:orange',0);
//【刪除樣式規(guī)則】
//sheet.deleteRule(position) ; //刪除樣式 參數(shù)為位置 //IE8及以上不支持
//sheet.removeRule(position) ; //刪除樣式 參數(shù)為位置 //IE支持
function deleteCss(position){ //跨瀏覽器兼容
if(sheet.deleteRule){
sheet.deleteRule(position);
}else if(sheet.removeRule){
sheet.removeRule(position);
}
deleteCss(0);
}
}
</script>
</head>
<body></body>
</html>
以上所述是小編給大家介紹的JavaScript新增樣式規(guī)則(推薦),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽
- JavaScript操作class和style樣式代碼詳解
- JS獲取CSS樣式(style/getComputedStyle/currentStyle)
- JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法
- JavaScript操作HTML元素和樣式的方法詳解
- 基于JS實(shí)現(xiàn)簡(jiǎn)單的樣式切換效果代碼
- javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
- js獲取內(nèi)聯(lián)樣式的方法
- js獲取元素外鏈樣式的方法
- js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
- JavaScript中獲取樣式的原生方法小結(jié)
相關(guān)文章
使用JavaScript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11
如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能
這篇文章主要介紹了如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法
這篇文章主要介紹了使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法,需要的朋友可以參考下2018-12-12
微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02
JavaScript實(shí)現(xiàn)數(shù)據(jù)可視化圖表的示例代碼
這篇文章主要介紹了如何使用JavaScript創(chuàng)建實(shí)時(shí)數(shù)據(jù)可視化圖表,我們將使用流行的圖表庫(kù),如Chart.js,來(lái)展示如何將實(shí)時(shí)數(shù)據(jù)動(dòng)態(tài)呈現(xiàn)在圖表中,感興趣的可以了解下2024-01-01
簡(jiǎn)述凍結(jié)JS對(duì)象方法技術(shù)
本文主要介紹了凍結(jié)JS對(duì)象方法技術(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Javascript編寫(xiě)俄羅斯方塊思路及實(shí)例
本文主要給大家介紹的是使用javascript編寫(xiě)俄羅斯方塊小游戲的思路和具體的實(shí)例代碼,有需要的小伙伴可以參考下2015-07-07

