搜尋
首頁web前端js教程在目前style sheet插入一個新的style實作方法_javascript技巧

很少會插入一個新的style rule,今天為了暫時解決頁面樣式問題,需要更新很多頁面的一些樣式,這些頁面都引用了一個公共的js,為了方便,直接在這個公共的js裡面向style sheet插入新的style rule。

先看程式碼:

複製程式碼 程式碼如下:

*
* 在文件中添加樣式表規則(可能是更好的做法,
* 動態更改類,因此樣式資訊可以保留在
* 真正的樣式表中(並避免向DOM 添加額外的元素) ))
* 請注意,聲明和規則需要一個數組,因為ECMAScript
* 無法提供可預測的物件迭代順序,而且CSS
* 順序相關(即,它是級聯的) ;那些不需要
* 級聯規則的人可以建立一個更訪客友善的基於物件的API。
* @param {Array} decls 接受JSON 編碼聲明的陣列
* @example
addStylesheetRules([
['h2', // 也接受第二個參數作為陣列的陣列而是
['color', 'red'],
['background-color', 'green', true] // 'true' ! 重要法則
],
['. myClass' ,
['背景顏色', '黃色']
]
]);
*/
function addStylesheetRules (decls) {
var style = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
if (!window.createPopup) { /* For Safari */
style.appendChild(document.createTextNode(''));
}
var s = document.styleSheets[document.styleSheets .length - 1];
for (var i=0, dl = decls.length; i var j = 1, decl = decls[i], selector = decl[0] , rulesStr = '';
if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') {
decl = decl[1];
j = 0;
}
for (var rl=decl.length; j var rule = decl[j];
rulesStr = rule[0] ': ' rule[1] (rule[2] ? ' !important' : '') ';n';
}
if (s.insertRule) {
s.insertRule(selector '{' rulesStr '}', s.cssRules.length);
}
else { /* IE */
s.addRule(selector, rulesStr, -1);
}
}
}

複製程式碼 程式碼如下:


程式碼如下:


div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]]) 複製程式碼


程式碼如下:


程式碼如下:
知道怎麼呼叫了吧,每次呼叫都會插入一個新的style,所以最好呼叫一次,插入多個rule



複製程式碼

程式碼如下:

程式碼如下:


addStylesheetRules(
[selector, [attr, value], …],
[selector, [attr, value], …]
);

主要用到兩個方法: 標準方法:stylesheet.insertRule(rule, index) rule:被插入的rule,如div.content{color:#000} index: 插入順序,先後順序會影響樣式的。從0開始firefox、chrome、opera、safri、ie從ie9開始也支持這個方法ie的stylesheet.addRule (selector, styleDef [, positionIndex]); selector:如div.content styleDef:如color:#000 positionIndex:預設-1,插入到末尾ie、safari、chrome支援這個方法
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
macOS:如何更改桌面小部件的颜色macOS:如何更改桌面小部件的颜色Oct 07, 2023 am 08:17 AM

在macOSSonoma中,小部件不必隐藏在屏幕外,也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反,它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时,macOS桌面小部件会采用单色样式淡入背景,从而减少干扰,并允许您专注于活动应用程序或窗口中手头的任务。但是,当您单击桌面时,它们将恢复为全彩色。如果您更喜欢单调的外观,并且希望在桌面上保留这一方面的统一性,那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

element.style怎么修改element.style怎么修改Nov 24, 2023 am 11:15 AM

element.style修改元素的方法:1、修改元素的背景颜色;2、修改元素的字体大小;3、修改元素的边框样式;4、修改元素的字体样式;5、修改元素的水平对齐方式。详细介绍:1、修改元素的背景颜色,其语法为“document.getElementById("myElement").style.backgroundColor = "red";”;2、修改元素的字体大小等等。

react 怎么动态修改stylereact 怎么动态修改styleDec 28, 2022 am 10:44 AM

react动态修改style的方法:1、在需要修改样式的元素上添加ref,其语法如“<div className='scroll-title clear-fix' ref={ this.manage }>”;2、通过动态控制状态的变化修改元素的样式;3、通过在DOM中使用JS代码实现不同DOM的展示与隐藏转换。

WordPress网页错位现象解决攻略WordPress网页错位现象解决攻略Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中,有时候我们会遇到网页元素错位的情况,这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象,我们需要仔细分析问题、查找可能的原因,并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略,同时提供具体的代码示例,帮助开

Vue3 style中新增的特性有哪些及怎么用Vue3 style中新增的特性有哪些及怎么用May 14, 2023 pm 10:52 PM

style新特性Vue3.2版本对单文件组件的style样式进行了很多升级,如局部样式、css变量以及样式暴露给模板使用等。(学习视频分享:vue视频教程)一、局部样式当标签带有scopedattribute的时候,它的CSS只会应用到当前组件的元素上:hi.example{color:red;}二、深度选择器处于scoped样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用:deep()这个伪类:.a:deep(.b){/*...*/}通过v-html创建的DOM内容不会被

CSS网页背景图设计:创建各种背景图样式和效果CSS网页背景图设计:创建各种背景图样式和效果Nov 18, 2023 am 08:38 AM

CSS网页背景图设计:创建各种背景图样式和效果,需要具体代码示例摘要:在网页设计中,背景图是一种重要的视觉元素,它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果,并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果,以达到更好的视觉效果和用户体验。关键词:CSS,背景图,设计样式,效果,代码示

Vue报错:无法正确使用v-bind绑定class和style,怎样解决?Vue报错:无法正确使用v-bind绑定class和style,怎样解决?Aug 26, 2023 pm 10:58 PM

Vue报错:无法正确使用v-bind绑定class和style,怎样解决?在Vue开发中,我们经常会用到v-bind指令来动态绑定class和style,但是有时候我们可能会遇到一些问题,如无法正确使用v-bind绑定class和style。在本篇文章中,我将为你解释这个问题的原因,并提供解决方案。首先,让我们先了解一下v-bind指令。v-bind用于将V

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式Nov 20, 2023 am 11:22 AM

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式,需要具体代码示例在CSS中,伪类选择器是一种非常强大的工具,可以用来选择文档树中特定的元素。其中之一就是:nth-last-child(2)伪类选择器,它可以选择倒数第二个子元素并对其应用样式。首先,让我们来创建一个示例HTML文档,以便我们可以在其中使用这个伪类选择器。以

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
2 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中