JavaScript에서 CSS 클래스를 동적으로 생성하여 적용하는 방법

JavaScript에서 CSS 클래스를 동적으로 생성하여 적용하는 방법

JavaScript에서 동적으로 CSS 스타일시트 클래스를 생성하여 div, table, span, tr 등의 HTML 요소와 asp와 같은 컨트롤에 할당해야 합니다.텍스트 상자, 드롭다운 목록 및 데이터 목록.

가능합니까?

샘플이 있으면 좋을 것 같아요.

다음은 옵션입니다.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

모든 브라우저에서 사용할 수 있는 더 나은 솔루션을 찾았습니다.
document하여 rulesdocument.styleSheet를 .인정된 답변은 간단하고 편리하지만 IE8 전체에서도 유효합니다.

function createCSSSelector (selector, style) {
  if (!document.styleSheets) return;
  if (document.getElementsByTagName('head').length == 0) return;

  var styleSheet,mediaType;

  if (document.styleSheets.length > 0) {
    for (var i = 0, l = document.styleSheets.length; i < l; i++) {
      if (document.styleSheets[i].disabled) 
        continue;
      var media = document.styleSheets[i].media;
      mediaType = typeof media;

      if (mediaType === 'string') {
        if (media === '' || (media.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }
      else if (mediaType=='object') {
        if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }

      if (typeof styleSheet !== 'undefined') 
        break;
    }
  }

  if (typeof styleSheet === 'undefined') {
    var styleSheetElement = document.createElement('style');
    styleSheetElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(styleSheetElement);

    for (i = 0; i < document.styleSheets.length; i++) {
      if (document.styleSheets[i].disabled) {
        continue;
      }
      styleSheet = document.styleSheets[i];
    }

    mediaType = typeof styleSheet.media;
  }

  if (mediaType === 'string') {
    for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
      if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) {
        styleSheet.rules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.addRule(selector,style);
  }
  else if (mediaType === 'object') {
    var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
    for (var i = 0; i < styleSheetLength; i++) {
      if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
        styleSheet.cssRules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
  }
}

기능은 다음과 같이 사용됩니다.

createCSSSelector('.mycssclass', 'display:none');

간단히 말하면, 이것은 「모든 브라우저」(구체적으로는 IE8/7)에 대응하고 있습니다.

function createClass(name,rules){
    var style = document.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    if(!(style.sheet||{}).insertRule) 
        (style.styleSheet || style.sheet).addRule(name, rules);
    else
        style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");

그리고 이 마지막 비트는 클래스를 요소에 적용합니다.

function applyClass(name,element,doRemove){
    if(typeof element.valueOf() == "string"){
        element = document.getElementById(element);
    }
    if(!element) return;
    if(doRemove){
        element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
    }else{      
        element.className = element.className + " " + name;
    }
}

여기에도 테스트 페이지가 있습니다.https://gist.github.com/shadybones/9816763

중요한 점은 스타일 요소가 '스타일'을 가지고 있다는 사실이다.규칙을 추가하거나 제거하는 데 사용할 수 있는 "시트"/"시트" 속성입니다.

CSS 선언을 생성할 수 있는 가벼운 jQuery 플러그인이 있습니다.jQuery-injectCSS

실제로는 JSS(JSON에 의해 기술된 CSS)를 사용하지만 동적 css 스타일시트를 생성하기 위해서는 매우 간단합니다.

$.injectCSS({
    "#test": {
        height: 123
    }
});

YUI는 지금까지 본 것 중 최고의 스타일시트 유틸리티를 가지고 있습니다.꼭 확인해 보시기 바랍니다만, 여기 맛의 예가 있습니다.

// style element or locally sourced link element
var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true));

sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local'));


// OR the id of a style element or locally sourced link element
sheet = YAHOO.util.StyleSheet('local');


// OR string of css text
var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +
          ".moduleX .warn  { background: #eec; } " +
          ".hide_messages .moduleX .alert, " +
          ".hide_messages .moduleX .warn { display: none; }";

sheet = new YAHOO.util.StyleSheet(css);

여기에 제시된 것과 같이 스타일을 즉시 바꾸는 훨씬 더 간단한 방법들이 분명히 있습니다.문제가 해결된다면 가장 좋은 방법이 될 수 있지만 CSS를 변경하는 것이 더 나은 해결책이 될 수 있는 이유는 분명 있습니다.가장 명백한 경우는 다수의 요소를 수정해야 하는 경우입니다.또 다른 주요 케이스는 캐스케이드를 포함하기 위해 스타일을 변경해야 하는 경우입니다.DOM을 사용하여 요소를 수정하면 항상 우선순위가 높아집니다. Slegehammer, Slegehammer를 합니다.styleHTML html html html html html html html html html html 。그것은 항상 원하는 효과는 아니다.

IE 9의 경우.이제 텍스트 파일을 로드하고 style.inner를 설정할 수 있습니다.HTML 속성따라서 기본적으로는 ajax를 통해 css 파일을 로드하고(및 콜백을 취득) 스타일 태그의 내부에 텍스트를 설정할 수 있습니다.

이 기능은 다른 브라우저에서도 사용할 수 있으며, 얼마나 이전인지 알 수 없습니다.그러나 IE8을 지원할 필요가 없는 한 동작합니다.

// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers.
$(document).ready(function() {
    // we want to load the css as a text file and append it with a style.
    $.ajax({
        url:'myCss.css',
        success: function(result) {
            var s = document.createElement('style');
            s.setAttribute('type', 'text/css');
            s.innerHTML = result;
            document.getElementsByTagName("head")[0].appendChild(s);
        },
        fail: function() {
            alert('fail');
        }
    })
});

myCss.css와 같은 외부 파일을 가져올 수 있습니다.

.myClass { background:#F00; }

다음은 Vishwanath의 솔루션을 코멘트로 약간 수정한 것입니다.

function setStyle(cssRules, aSelector, aStyle){
    for(var i = 0; i < cssRules.length; i++) {
        if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) {
            cssRules[i].style.cssText = aStyle;
            return true;
        }
    }
    return false;
}

function createCSSSelector(selector, style) {
    var doc = document;
    var allSS = doc.styleSheets;
    if(!allSS) return;

    var headElts = doc.getElementsByTagName("head");
    if(!headElts.length) return;

    var styleSheet, media, iSS = allSS.length; // scope is global in a function
    /* 1. search for media == "screen" */
    while(iSS){ --iSS;
        if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */
        media = allSS[iSS].media;
        if(typeof media == "object")
            media = media.mediaText;
        if(media == "" || media=='all' || media.indexOf("screen") != -1){
            styleSheet = allSS[iSS];
            iSS = -1;   // indication that media=="screen" was found (if not, then iSS==0)
            break;
        }
    }

    /* 2. if not found, create one */
    if(iSS != -1) {
        var styleSheetElement = doc.createElement("style");
        styleSheetElement.type = "text/css";
        headElts[0].appendChild(styleSheetElement);
        styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */
    }

    /* 3. add the selector and style */
    switch (typeof styleSheet.media) {
    case "string":
        if(!setStyle(styleSheet.rules, selector, style));
            styleSheet.addRule(selector, style);
        break;
    case "object":
        if(!setStyle(styleSheet.cssRules, selector, style));
            styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
        break;
    }

구글 폐쇄 사용:

ccsom 모듈을 사용하면 됩니다.

goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');

javascript 코드는 css 노드를 문서 헤드에 넣을 때 크로스 브라우저를 시도합니다.

https://jsfiddle.net/xk6Ut/256/

JavaScript에서 CSS 클래스를 동적으로 만들고 업데이트하는 옵션 중 하나는 다음과 같습니다.

• 스타일 요소를 사용한 CSS 섹션 작성
• 스타일 요소의 ID를 사용하여 CSS를 업데이트할 수 있습니다.
  학급

.....

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) 
             document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

    var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)

하나의 라이너로 문서에 하나 이상의 새 계단식 규칙을 첨부합니다.

이 예에서는,cursor:pointer모든 사람에게button,input,select.

document.body.appendChild(Object.assign(document.createElement("style"), {textContent: "select, button, input {cursor:pointer}"}))

당신의 업무에 도움이 될 수 있는 흥미로운 프로젝트는 JSS입니다.

JSS는 JavaScript를 사용하여 선언적이고 경합이 없는 재사용 가능한 방법으로 스타일을 기술할 수 있는 CSS용 오서링 도구입니다.브라우저, 서버 측 또는 빌드 시 노드에서 컴파일할 수 있습니다.

JSS 라이브러리를 사용하여 DOM/헤드 섹션에 삽입할 수 있습니다..attach()기능.

평가를 위해 온라인 버전을 복제합니다.

JSS에 대한 상세 정보.

예:

// Use plugins.
jss.use(camelCase())

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

여기서 몇 가지 답변을 살펴보았는데, 새로운 스타일시트가 없으면 자동으로 추가되는 것을 찾을 수 없었습니다.또한 필요한 스타일이 이미 포함되어 있는 기존 스타일시트를 단순히 수정하지 않으면 새로운 기능을 만들었습니다(테스트되지 않았지만 모든 브라우저에서 addRule을 사용하고 기본 네이티브 Jav만 사용합니다).aScript, 동작하는지 알려주세요.)

function myCSS(data) {
    var head = document.head || document.getElementsByTagName("head")[0];
    if(head) {
        if(data && data.constructor == Object) {
            for(var k in data) {
                var selector = k;
                var rules = data[k];

                var allSheets = document.styleSheets;
                var cur = null;

                var indexOfPossibleRule = null,
                    indexOfSheet = null;
                for(var i = 0; i < allSheets.length; i++) {
                    indexOfPossibleRule = findIndexOfObjPropInArray("selectorText",selector,allSheets[i].cssRules);
                    if(indexOfPossibleRule != null) {
                        indexOfSheet = i;
                        break;
                    }
                }

                var ruleToEdit = null;
                if(indexOfSheet != null) {

                    ruleToEdit = allSheets[indexOfSheet].cssRules[indexOfPossibleRule];

                } else {
                    cur = document.createElement("style");
                    cur.type =  "text/css";
                    head.appendChild(cur);
                    cur.sheet.addRule(selector,"");
                    ruleToEdit = cur.sheet.cssRules[0];
                    console.log("NOPE, but here's a new one:", cur);
                }
                applyCustomCSSruleListToExistingCSSruleList(rules, ruleToEdit, (err) => {
                    if(err) {
                        console.log(err);
                    } else {
                        console.log("successfully added ", rules, " to ", ruleToEdit);
                    }
                });
            }
        } else {
            console.log("provide one paramter as an object containing the cssStyles, like: {\"#myID\":{position:\"absolute\"}, \".myClass\":{background:\"red\"}}, etc...");
        }
    } else {
        console.log("run this after the page loads");
    }

};  

위의 2가지 도우미 기능 중 하나를 추가해 주세요.

function applyCustomCSSruleListToExistingCSSruleList(customRuleList, existingRuleList, cb) {
    var err = null;
    console.log("trying to apply ", customRuleList, " to ", existingRuleList);
    if(customRuleList && customRuleList.constructor == Object && existingRuleList && existingRuleList.constructor == CSSStyleRule) {
        for(var k in customRuleList) {
            existingRuleList["style"][k] = customRuleList[k];
        }

    } else {
        err = ("provide first argument as an object containing the selectors for the keys, and the second argument is the CSSRuleList to modify");
    }
    if(cb) {
        cb(err);
    }
}

function findIndexOfObjPropInArray(objPropKey, objPropValue, arr) {
    var index = null;
    for(var i = 0; i < arr.length; i++) {
        if(arr[i][objPropKey] == objPropValue) {
            index = i;
            break;
        }
    }
    return index;
}

(둘 다 .filter 대신 for 루프를 사용하는 것에 주의해 주세요.CSS 스타일/규칙 리스트클래스에는 길이 속성만 있고 .filter 메서드는 없기 때문입니다).

그럼 이렇게 부르면:

myCSS({
    "#coby": {
        position:"absolute",
        color:"blue"
    },
    ".myError": {
        padding:"4px",
        background:"salmon"
    }
})

브라우저에 문제가 없는지, 오류가 발생하는지 알려주세요.

답을 살펴봤지만 가장 명확하고 솔직한 내용이 누락되었습니다.: 사용document.write()필요한 CSS 청크를 작성합니다.

다음은 예를 제시하겠습니다(codepen:http://codepen.io/ssh33/pen/zGjWga)에서 참조).

<style>
   @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
   .d, body{ font: 3vw 'Open Sans'; padding-top: 1em; }
   .d {
       text-align: center; background: #aaf;
       margin: auto; color: #fff; overflow: hidden; 
       width: 12em; height: 5em;
   }
</style>

<script>
   function w(s){document.write(s)}
   w("<style>.long-shadow { text-shadow: ");
   for(var i=0; i<449; i++) {
      if(i!= 0) w(","); w(i+"px "+i+"px #444");
   }
   w(";}</style>");
</script> 

<div class="d">
    <div class="long-shadow">Long Shadow<br> Short Code</div>
</div>

검색자의 편의를 위해 jQuery를 사용하는 경우 다음을 수행할 수 있습니다.

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

물론 내부 css를 원하는 대로 변경할 수 있습니다.

순수한 JavaScript를 선호하는 사람도 있지만, 동적 쓰기/덮어쓰기 스타일에 대해 매우 강력합니다.

function createCSSClass(selector, style, hoverstyle) 
{
    if (!document.styleSheets) 
    {
        return;
    }

    if (document.getElementsByTagName("head").length == 0) 
    {

        return;
    }
    var stylesheet;
    var mediaType;
    if (document.styleSheets.length > 0) 
    {
        for (i = 0; i < document.styleSheets.length; i++) 
        {
            if (document.styleSheets[i].disabled) 
            {
                continue;
            }
            var media = document.styleSheets[i].media;
            mediaType = typeof media;

            if (mediaType == "string") 
            {
                if (media == "" || (media.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            } 
            else if (mediaType == "object") 
            {
                if (media.mediaText == "" || (media.mediaText.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            }

            if (typeof styleSheet != "undefined") 
            {
                break;
            }
        }
    }

    if (typeof styleSheet == "undefined") {
        var styleSheetElement = document.createElement("style");
        styleSheetElement.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
        for (i = 0; i < document.styleSheets.length; i++) {
            if (document.styleSheets[i].disabled) {
                continue;
            }
            styleSheet = document.styleSheets[i];
        }

        var media = styleSheet.media;
        mediaType = typeof media;
    }

    if (mediaType == "string") {
        for (i = 0; i < styleSheet.rules.length; i++) 
        {
            if (styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.rules[i].style.cssText = style;
                return;
            }
        }

        styleSheet.addRule(selector, style);
    }
    else if (mediaType == "object") 
    {
        for (i = 0; i < styleSheet.cssRules.length; i++) 
        {
            if (styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.cssRules[i].style.cssText = style;
                return;
            }
        }

        if (hoverstyle != null) 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
            styleSheet.insertRule(selector + ":hover{" + hoverstyle + "}", 1);
        }
        else 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
        }
    }
}





createCSSClass(".modalPopup  .header",
                                 " background-color: " + lightest + ";" +
                                  "height: 10%;" +
                                  "color: White;" +
                                  "line-height: 30px;" +
                                  "text-align: center;" +
                                  " width: 100%;" +
                                  "font-weight: bold; ", null);

모듈러형 솔루션은 다음과 같습니다.

var final_style = document.createElement('style');
final_style.type = 'text/css';

function addNewStyle(selector, style){
  final_style.innerHTML += selector + '{ ' + style + ' } \n';
};

function submitNewStyle(){
  document.getElementsByTagName('head')[0].appendChild(final_style);

  final_style = document.createElement('style');
  final_style.type = 'text/css';
};

function submitNewStyleWithMedia(mediaSelector){
  final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
    submitNewStyle();
};

기본적으로 코드 내의 모든 곳에서 다음을 수행할 수 있습니다.
addNewStyle('body', 'color: ' + color1);서, snowledge.color1을 사용하다

의 CSS 을 「는, 「CSS」, 「CSS」를 실시합니다.submitNewStyle() ,
CSS를 사용하다

"미디어 쿼리"를 사용하여 추가할 경우 옵션이 있습니다.
'스타일 추가'에는 '새로운 스타일 추가'를.submitNewStyleWithMedia('min-width: 1280px');.

---

현재 시간에 따라 퍼블릭(내 것이 아닌) 웹사이트의 CSS를 변경했기 때문에, 나의 활용 사례에 매우 도움이 되었습니다.사용하기 의 CSS 하고, 그 는 「1」의 「CSS」를 개입시켜 하기 상태가 ).querySelector를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply