如何使用 Javascript 添加 CSS?

How do you add CSS with Javascript?

提问人:nickf 提问时间:4/2/2009 最后编辑:nickf 更新时间:6/21/2023 访问量:384925

问:

如何使用 Javascript 添加 CSS 规则(例如)?strong { color: red }

JavaScript CSS

评论

0赞 ninMonkey 7/6/2012
同样的问题(答案是跨浏览器jQuery)stackoverflow.com/a/266110/341744
25赞 nickf 7/8/2012
@monkey :这是一个非常糟糕的解决方案,实际上并没有按照这里的要求去做。例如:如果将新元素添加到文档中会发生什么。<strong>

答:

349赞 Ben Blank 4/2/2009 #1

简单而直接的方法是创建新节点并将其添加到文档中。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)

评论

20赞 bobince 4/2/2009
它不应该附加到文档的头部而不是正文吗?
3赞 Ben Blank 4/3/2009
@bobince — 根据 HTML 规范,绝对可以,但所有浏览器都可以在任何地方识别它们。 键入时间也比 insertRule/addRule 更短,执行速度更快,并避免了 insertRule/addRule 的跨浏览器问题。document.bodydocument.getElementsByTagName("head")[0]
8赞 George Mauer 12/22/2012
解决方案之后应有一个长长的“咄咄逼人”。简直不敢相信我没有想到。
12赞 Gajus 4/7/2014
在所有最新的浏览器中,您都可以只使用 .document.head.appendChild
3赞 AvL 8/2/2016
这个解决方案要好得多!想象一下,你有多个样式表:使用@bobince解决方案,你新添加的CSS可能会被页面上的第二个/第三个/等样式表覆盖。使用时,请确保新的 CSS 始终是最后一条规则。document.body.appendChild(css);
156赞 bobince 4/2/2009 #2

您也可以使用 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。

评论

17赞 AJP 12/3/2013
sheet 来自(您必须至少有一个 <style type=“text/css”></style>)。sheet = window.document.styleSheets[0]
2赞 ElDoRado1239 6/27/2016
谢谢,谷歌首先显示的所有例子都是如此之大,而我所需要的只是刷新我对这两行的记忆。
1赞 user10089632 9/8/2017
我知道已经有一段时间了,但是当我测试第一个时,我得到了SecurityError: The operation is insecure.
5赞 bobince 9/9/2017
@user10089632您正在访问的样式表需要从与父文档相同的主机提供,才能正常工作。
0赞 BoxedFruits 8/28/2023
这两个函数现已弃用:/
3赞 Russell Leggett 4/2/2009 #3

YUI 最近刚刚为此添加了一个实用程序。请参阅此处的样式表 .js

评论

0赞 Jaime 12/15/2009
我目前正在使用 YUI 进行工作,并试图弄清楚如何编辑现有 css 规则的外部样式表。不知道这个实用程序,它似乎很完美!谢谢罗素。
5赞 mingala 4/2/2009 #4

您可以逐个元素添加类或样式属性。

例如:

<a name="myelement" onclick="this.style.color='#FF0';">text</a>

你可以在哪里做this.style.background,this.style.font-size等。您也可以使用相同的方法应用样式 ala

this.className='classname';

如果要在 javascript 函数中执行此操作,可以使用 getElementByID 而不是“this”。

评论

5赞 Colonel Sponsz 11/21/2012
使用事件处理程序的内联 JavaScript 是一个非常糟糕的主意。您应该将内容与功能分开,并在 JavaScript 中绑定事件处理程序 - 最好是在外部文件中。
28赞 Chris Herring 6/2/2011 #5

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);
}

评论

2赞 Han Seoul-Oh 5/14/2014
您应该将该元素附加到 before 设置中,否则 IE6-8 将崩溃,如果 包含 @ 指令,例如 或 ,请参阅更新到 phpied.com/dynamic-script-and-style-elements-in-iestackoverflow.com/a/7952904head.cssTextcssCode@import@font-face
27赞 Husky 2/15/2013 #6

下面是 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 );
}

评论

3赞 Han Seoul-Oh 5/14/2014
您应该将该元素附加到 before 设置中,否则 IE6-8 将崩溃,如果 包含 @ 指令,例如 或 ,请参阅更新到 phpied.com/dynamic-script-and-style-elements-in-iestackoverflow.com/a/7952904head.cssTextcode@import@font-face
0赞 Jon 11/18/2014 #7

这是我的通用函数,它参数化了 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);
    }
}
1赞 XtraSimplicity 6/27/2015 #8

另一种选择是使用 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" });

这可能不一定是最有效的方法(我愿意接受关于如何改进它的建议,:) ),但它绝对有效。

4赞 DarckBlezzer 10/5/2016 #9

这个简单的例子,在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

3赞 Martin Wantke 8/29/2017 #10

这是我在最后一个样式表列表末尾添加 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 }");
-3赞 Zain Ali 6/15/2018 #11

在 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> 

评论

2赞 agapitocandemor 11/11/2019
javascript,OP 对 jQuery 一无所知
1赞 Vincent Tang 6/23/2018 #12

下面是一个示例模板,可帮助你入门

需要 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;}"
)

2赞 user5490177 1/28/2019 #13

如果您知道页面中至少存在一个标签,请使用此功能:<style>

CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};

用法:

CSS("div{background:#00F}");
32赞 chickens 6/30/2019 #14

最短的单衬

// One liner function:
const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML=css;

// Usage: 
addCSS("body{ background:red; }")

-2赞 raddevus 5/13/2022 #15

我总是忘记如何向 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>

评论

0赞 Alexander Nied 5/13/2022
我想也许你误解了原来的问题——用户不是在问如何将现有的样式规则应用于元素,而是在问如何在文档中动态地插入新的样式规则。
1赞 raddevus 5/14/2022
每次我搜索向元素添加样式时,Google都会给我带来这个问题。另外,原来的问题很差,所以这就是我(和谷歌)对这个问题的解释。您是否也投票否决了原始问题并建议 OP 更新它以使其更清晰?这可能是最有帮助的。但就目前而言,很多寻找为元素添加风格的人都会发现这一点。
5赞 a cat 8/12/2022 #16

在现代浏览器中,您可以使用 document.adoptedStyleSheets 添加 CSS。

const sheet = new CSSStyleSheet();
sheet.replace("strong { color: red; }");
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

这种方法的一个优点是,您甚至不必等待元素变得可用,这在早期运行的浏览器扩展代码中可能是一个问题。<head>

评论

1赞 steps 9/26/2022
对于所有尝试的人:很棒的方法,尚未在 Safari 上运行
1赞 a cat 1/10/2023
@steps Safari TP 已经支持它。我只需要等待,随着时间的推移,我的答案会变得更好:>
0赞 Déjà vu 8/25/2023
@acat喵喵喵�
-1赞 VonC 6/21/2023 #17

最近使用 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' })} />
}