Javascript에서 CSS를 추가하려면 어떻게 해야 하나요?

Javascript에서 CSS를 추가하려면 어떻게 해야 하나요?

CSS 규칙을 추가하는 방법(예:strong { color: red }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)

이것은, DOM 레벨 2 CSS 인터페이스(MDN)를 사용해 실시할 수도 있습니다.

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

(자연스럽게) IE8 이전 버전을 제외한 모든 IE8에서는 다음과 같은 표현을 사용합니다.

sheet.addRule('strong', 'color: red;', -1);

여기에는 createElement-set-inner와 비교하여 이론적인 이점이 있습니다.HTML 방식, 특별한 HTML 문자를 내부에 넣을 필요가 없습니다.HTML이지만 실제 스타일 요소는 레거시 HTML의 CDATA이며, 스타일시트에는 '<'와 '&'가 거의 사용되지 않습니다.

스타일시트를 이렇게 추가하려면 먼저 스타일시트가 필요합니다.외부, 임베디드, 빈 등 기존의 액티브한 스타일시트를 사용할 수 있습니다.상관없습니다.존재하지 않는 경우 현재 표준 작성 방법은 createElement를 사용하는 것뿐입니다.

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

최단 원 라이너

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

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

다음은 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 );
}

요소별로 요소에 클래스 또는 스타일 속성을 추가할 수 있습니다.

예를 들어 다음과 같습니다.

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

여기서 이.style.background, 이.style.font-size 등을 수행할 수 있습니다.동일한 방법으로 스타일을 적용할 수도 있습니다.

this.className='classname';

javascript 함수로 이를 수행하려면 getElementBy를 사용할 수 있습니다.'이거'가 아니라 '아이디'

이 간단한 추가 예시는<style>html 선두에

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

소스 다이내믹 스타일 - 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 }");

최근 YUI에서 이 전용 유틸리티를 추가했습니다.stylesheet.js를 참조하십시오.

적어도 하나라도 알고 있다면<style>태그는 페이지에 존재합니다.다음 기능을 사용합니다.

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

사용방법:

CSS("div{background:#00F}");

또 다른 옵션은 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" });

이 방법이 반드시 가장 효율적인 방법은 아닐 수도 있습니다(개선 방법에 대한 제안에는 응할 수 있습니다). 하지만 확실히 효과가 있습니다.

여기 샘플 템플릿이 있습니다.

0개의 라이브러리가 필요하며 HTML과 CSS를 모두 주입하기 위해 javascript만 사용합니다.

위의 사용자 @Husky에서 빌린 함수입니다.

변조 키 스크립트를 실행하고 웹 사이트에서 전환 오버레이를 추가하려는 경우(예: 노트 앱)에 유용합니다.

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

이것은 CSS 셀렉터와 규칙을 파라미터로 하여 특정 시트에 추가할 경우(대소문자를 구분함) 옵션으로 css 파일 이름을 입력합니다(그렇지 않으면 CSS 파일 이름을 지정하지 않으면 새로운 스타일 요소가 생성되어 기존 헤드에 추가됩니다).최대 1개의 새로운 스타일 요소를 만들어 향후 기능 호출 시 재사용합니다).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);
    }
}

최신 브라우저에서는 를 사용하여 CSS를 추가할 수 있습니다.

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

의 장점 중는 '가 없다'는 입니다.<head>이는 매우 이른 시기에 실행되는 브라우저 확장 코드의 문제일 수 있습니다.

HTML 엘리먼트에 클래스를 추가하는 방법을 항상 잊어버리고 있습니다.이 SO는 구글에서 일찍 등장합니다만, 이것을 하는 현대적인 방법을 추가한 사람은 아무도 없습니다.이렇게 하겠습니다.

하고 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>

.css리리 j j와 같은 $('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> 

언급URL : https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript