提问人:nickf 提问时间:4/2/2009 最后编辑:nickf 更新时间:6/21/2023 访问量:384925
如何使用 Javascript 添加 CSS?
How do you add CSS with Javascript?
答:
简单而直接的方法是创建新节点并将其添加到文档中。style
// Your CSS as text
var styles = `
.qwebirc-qui .ircwindow div {
font-family: Georgia,Cambria,"Times New Roman",Times,serif;
margin: 26px auto 0 auto;
max-width: 650px;
}
.qwebirc-qui .lines {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em;
}
.qwebirc-qui .nicklist a {
margin: 6px;
}
`
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
评论
document.body
document.getElementsByTagName("head")[0]
document.head.appendChild
document.body.appendChild(css);
您也可以使用 DOM Level 2 CSS 接口 (MDN) 来执行此操作:
var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);
...除了(自然的)IE8 及更早版本之外,它使用自己略有不同的措辞:
sheet.addRule('strong', 'color: red;', -1);
与 createElement-set-innerHTML 方法相比,这在理论上具有优势,因为您不必担心在 innerHTML 中放置特殊的 HTML 字符,但实际上样式元素在旧版 HTML 中是 CDATA,并且 '<' 和 '&' 很少在样式表中使用。
在开始像这样附加到它之前,您确实需要一个样式表。它可以是任何现有的活动样式表:外部的、嵌入的或空的,这无关紧要。如果没有,目前创建它的唯一标准方法是使用 createElement。
评论
sheet = window.document.styleSheets[0]
SecurityError: The operation is insecure.
YUI 最近刚刚为此添加了一个实用程序。请参阅此处的样式表 .js。
评论
您可以逐个元素添加类或样式属性。
例如:
<a name="myelement" onclick="this.style.color='#FF0';">text</a>
你可以在哪里做this.style.background,this.style.font-size等。您也可以使用相同的方法应用样式 ala
this.className='classname';
如果要在 javascript 函数中执行此操作,可以使用 getElementByID 而不是“this”。
评论
Ben Blank 的解决方案在 IE8 中对我来说不起作用。
但是,这在 IE8 中确实有效
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
评论
head
.cssText
cssCode
@import
@font-face
下面是 Chris Herring 解决方案的略微更新版本,考虑到您也可以使用而不是创建新的文本节点:innerHTML
function insertCss( code ) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
// IE
style.styleSheet.cssText = code;
} else {
// Other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
评论
head
.cssText
code
@import
@font-face
这是我的通用函数,它参数化了 CSS 选择器和规则,如果您想添加到特定工作表中,可以选择性地接受 css 文件名(区分大小写)(否则,如果您不提供 CSS 文件名,它将创建一个新的样式元素并将其附加到现有标题。它最多会创建一个新的样式元素,并在将来的函数调用中重用它)。适用于 FF、Chrome 和 IE9+(可能更早,未经测试)。
function addCssRules(selector, rules, /*Optional*/ sheetName) {
// We want the last sheet so that rules are not overridden.
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (sheetName) {
for (var i in document.styleSheets) {
if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) {
styleSheet = document.styleSheets[i];
break;
}
}
}
if (typeof styleSheet === 'undefined' || styleSheet === null) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
document.head.appendChild(styleElement);
styleSheet = styleElement.sheet;
}
if (styleSheet) {
if (styleSheet.insertRule)
styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length);
else if (styleSheet.addRule)
styleSheet.addRule(selector, rules);
}
}
另一种选择是使用 JQuery 存储元素的内联样式属性,追加到该属性,然后使用新值更新元素的样式属性。如下:
function appendCSSToElement(element, CssProperties)
{
var existingCSS = $(element).attr("style");
if(existingCSS == undefined) existingCSS = "";
$.each(CssProperties, function(key,value)
{
existingCSS += " " + key + ": " + value + ";";
});
$(element).attr("style", existingCSS);
return $(element);
}
然后使用新的CSS属性作为对象执行它。
appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });
这可能不一定是最有效的方法(我愿意接受关于如何改进它的建议,:) ),但它绝对有效。
这个简单的例子,在html的头部添加<style>
var sheet = document.createElement('style');
sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ "table ul { margin-top: 0 !important; margin-bottom: 0 !important;}\n"
+ "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ ".messages.error{display:none !important;}\n"
+ ".messages.status{display:none !important;} ";
document.body.appendChild(sheet); // append in body
document.head.appendChild(sheet); // append in head
Source Dynamic style - 使用 JavaScript 操作 CSS
这是我在最后一个样式表列表末尾添加 css 规则的解决方案:
var css = new function()
{
function addStyleSheet()
{
let head = document.head;
let style = document.createElement("style");
head.appendChild(style);
}
this.insert = function(rule)
{
if(document.styleSheets.length == 0) { addStyleSheet(); }
let sheet = document.styleSheets[document.styleSheets.length - 1];
let rules = sheet.rules;
sheet.insertRule(rule, rules.length);
}
}
css.insert("body { background-color: red }");
在 Jquery 中使用,例如.css
$('strong').css('background','red');
$('strong').css('background','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong> Example
</strong>
评论
下面是一个示例模板,可帮助你入门
需要 0 个库,并且仅使用 javascript 同时注入 HTML 和 CSS。
该函数是从上面的用户@Husky借来的
如果您想运行 tampermonkey 脚本并想在网站(例如笔记应用程序)上添加切换覆盖层,这很有用
// INJECTING THE HTML
document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>';
// CSS INJECTION FUNCTION
//https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
function insertCss( code ) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
// IE
style.styleSheet.cssText = code;
} else {
// Other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
// INJECT THE CSS INTO FUNCTION
// Write the css as you normally would... but treat it as strings and concatenate for multilines
insertCss(
"#injection {color :red; font-size: 30px;}" +
"body {background-color: lightblue;}"
)
如果您知道页面中至少存在一个标签,请使用此功能:<style>
CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};
用法:
CSS("div{background:#00F}");
最短的单衬
// One liner function:
const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML=css;
// Usage:
addCSS("body{ background:red; }")
我总是忘记如何向 HTML 元素添加类,这个 SO 在 Google 中很早就出现了,但没有人添加现代方法,所以这里开始了。
要添加 CSS 样式,您可以选择元素并调用.classList.add(<className>)
例如:document.querySelector("#main").classList.add("bg-primary");
您可能还需要删除与您添加的类冲突的其他类。为此,请执行以下操作:document.querySelector("#main").classList.remove("bg-secondary");
就是这样。运行示例,你将看到 setInterval() 方法每 3 秒添加和删除样式一次。
let useSecondary = false;
setInterval(changeBgColor, 3000);
function changeBgColor(){
if (useSecondary){
document.querySelector("#main").classList.remove("bg-primary");
document.querySelector("#main").classList.add("bg-secondary");
}
else{
document.querySelector("#main").classList.remove("bg-secondary");
document.querySelector("#main").classList.add("bg-primary");
}
useSecondary = !useSecondary;
}
* {
transition: all 0.5s ease-in-out;
}
.bg-primary {
background-color: green;
}
.bg-secondary{
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div >
<div id="main" >
Example text has background color changed every 3 seconds by adding / removing CSS styles.
</div>
</div>
</body>
</html>
评论
在现代浏览器中,您可以使用 document.adoptedStyleSheets
添加 CSS。
const sheet = new CSSStyleSheet();
sheet.replace("strong { color: red; }");
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
这种方法的一个优点是,您甚至不必等待元素变得可用,这在早期运行的浏览器扩展代码中可能是一个问题。<head>
评论
最近使用 Javascript 生成 CSS 的另一种方法是 panda-css(GitHub 项目:chakra-ui/panda
),于 2022 年 7 月启动。
请参阅 Ivica Batinić 的“Panda CSS – CSS-in-JS without Runtime Overhead”
假设设置正确(请参阅“Panda 入门”),从头开始使用 Panda 的最快方法是使用 Panda CLI 工具。
安装 Panda
npm install -D @pandacss/dev npx panda init
配置内容
将路径添加到要使用 panda 的所有 JavaScript 或 TypeScript 代码中。
import { defineConfig } from '@pandacss/dev' export default defineConfig({ preflight: true, include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'], exclude: [], outdir: 'styled-system' })
导入生成的 CSS
对于每个 Panda 运行,它都会在文件路径处发出生成的 CSS。在项目的根组件中导入此文件。
styled-system/styles.css
import './styled-system/styles.css' export function App() { return <div>Page</div> }
启动 Panda 构建过程
运行 CLI 工具以扫描 JavaScript 和 TypeScript 文件以查找样式属性和调用表达式。
# Run it once npx panda # Run it in watch mode npx panda --watch
开始使用 Panda
在代码中使用生成的样式实用程序,panda 会将它们提取到生成的 CSS 文件中。
import { css } from './styled-system/css' export function App() { return <div className={css({ bg: 'red.400' })} /> }
评论
<strong>