런타임시 jQuery를 사용하여 CSS 규칙 / 클래스 만들기

일반적으로 CSS 파일에는 다음 규칙이 있습니다.

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

런타임 작업 중에 CSS 정보를 본문 또는 이와 비슷한 것으로 추가하여 정적 CSS 파일을 작성하지 않으려면 어떻게해야합니까? (jQuery 만 사용)

jQuery로 한 번 정의하고 나중에 여러 번 사용하고 싶습니다. 그렇기 때문에 매번 특정 DOM 요소에 추가하고 싶지 않습니다.

간단한 기능 ( css("attr1", "value");)을 알고 있지만 재사용 가능한 완전한 CSS 규칙을 어떻게 만들 수 있습니까?

스타일 요소를 만들어 DOM에 삽입 할 수 있습니다

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

Opera10 FF3.5 iE8 iE6에서 테스트

간단히

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

백 슬래시가 나타 났나요? 새 줄에있는 문자열을 조인하는 데 사용됩니다. 그것들을 남겨두면 오류가 발생합니다.

CSS에 객체를 적용 할 수 있습니다. 따라서 다음과 같이 자바 스크립트에서 객체를 정의 할 수 있습니다.

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

그런 다음 원하는 모든 요소에 적용하십시오.

$("#myelement").css(my_css_class);

재사용이 가능합니다. 그래도 어떤 목적으로 사용 하시겠습니까?

당신은 사용할 수 있습니다 insertRule을 당신이 IE <9를 지원하기 위해 필요하지 않은 경우에있어서, 상기 dottoro . 거기에는 약간의 크로스 브라우저 코드가 있습니다.

document.styleSheets[0].insertRule('#my-window {\
    position: fixed;\
    z-index: 102;\
    display:none;\
    top:50%;\
    left:50%;\
}', 0)

CSS를 주입 할 수있는 jquery 플러그인은 다음과 같습니다.

https://github.com/kajic/jquery-injectCSS

예:

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

여기 및 여기에 설명 된 개념을 사용하기 때문에 다른 답변과 비교하여 새로운 것은 아니지만 JSON 스타일 선언을 사용하고 싶었습니다.

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

용법:

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

CSS의 모든 기능을 다루고 있는지 확실하지 않지만 지금까지는 효과가 있습니다. 그렇지 않다면 자신의 필요에 맞는 출발점으로 생각하십시오. :)

CSS를 CSS 블록 / 파일로 하드 코딩하지 않으려는 경우 jQuery를 사용하여 HTML 요소, ID 및 클래스에 CSS를 동적으로 추가 할 수 있습니다.

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

사용자 정의 규칙을 추가하면 사용자 정의 CSS가 필요한 jQuery 위젯 (예 : 특정 위젯의 기존 jQueryUI CSS 프레임 워크 확장)을 작성할 때 유용합니다. 이 솔루션은 Taras의 답변 (위의 첫 번째 답변)을 기반으로합니다.

HTML 마크 업에 ID가 "addrule"인 버튼과 텍스트가 포함 된 "target"이있는 div가 있다고 가정합니다.

jQuery 코드 :

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type='text/css'> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

이 방법의 장점은 코드에서 변수 cssrule을 재사용하여 원하는대로 규칙을 추가하거나 뺄 수 있다는 것입니다. cssrules가 jQuery 위젯과 같은 지속적 오브젝트에 임베드되면 작업 할 지속적 로컬 변수가 있습니다.

참고 jQuery().css() 스타일 시트 규칙을 변경하지 않습니다, 그냥 각각 일치하는 요소의 스타일을 변경합니다.

대신, 스타일 시트 규칙 자체를 수정하기 위해 작성한 자바 스크립트 함수가 있습니다.

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
        }
    }

장점 :

• <head>DOM 요소를 작성하기 전에 그리고 문서를 처음 렌더링하기 전에 스크립트 에서 스타일을 계산 하여 시각적으로 성가신 렌더링을 피하고 계산 한 다음 다시 렌더링 할 수 있습니다. jQuery를 사용하면 DOM 요소가 생성 될 때까지 기다렸다가 다시 스타일을 지정하고 다시 렌더링해야합니다.
• 스타일 변경 후 동적으로 추가 된 요소는 별도의 추가 호출없이 자동으로 새 스타일이 적용됩니다. jQuery(newElement).css()

주의 사항 :

• Chrome 및 IE10에서 사용했습니다. 이전 버전의 IE에서 제대로 작동하려면 약간 수정해야 할 수도 있습니다. 특히 이전 버전의 IE는 s.cssRules정의 되지 않았을 수 있으므로 s.rules쉼표로 구분 된 선택기와 관련된 홀수 / 버기 동작과 같은 특징 이 있는 것으로 돌아갑니다."body, p" 있습니다. 이를 피하면 수정하지 않고 이전 IE 버전에서는 문제가 없지만 아직 테스트하지는 않았습니다.
• 현재 선택기는 정확히 일치해야합니다. 소문자를 사용하고 쉼표로 구분 된 목록에주의하십시오. 순서는 일치해야하며 형식이어야합니다. "first, second"즉, 분리 문자는 쉼표 뒤에 공백 문자가옵니다.
• 쉼표로 구분 된 목록의 선택기와 같이 겹치는 선택기를 감지하고 지능적으로 처리하는 데 약간의 시간이 더 걸릴 수 있습니다.
• !important너무 많은 문제없이 미디어 쿼리 및 수정자를 지원할 수도 있습니다 .

이 기능을 개선하고 싶다면 다음과 같은 유용한 API 문서를 참조 하십시오. https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

테마 작성기 앱과 같이 스타일을 자주 동적으로 변경하려는 경우 (특이하지 않은) 경우 <style> 태그를 추가하거나 CSSStyleSheet.insertRule ()을 호출하면 스타일 시트가 커져서 성능과 디자인이 향상 될 수 있습니다. 디버깅 의미.

내 접근 방식은 선택기 / 속성 콤보 당 하나의 규칙 만 허용하고 규칙 설정시 기존 규칙을 지 웁니다. API는 간단하고 유연합니다.

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

용법:

addStyles('body', {
    'background-color': 'black',
    color: 'green',
    margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')

동적 규칙을 사용하여 페이지에 <script> 섹션을 동적으로 작성한 다음 jQuerys .addClass (class)를 사용하여 동적으로 작성된 규칙을 추가하면 어떻게됩니까?

나는 이것을 시도하지 않았으며 작동 할 수있는 이론을 제공했습니다.

조금 게으른 대답이지만 다음 기사가 도움이 될 수 있습니다. http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

또한 Google에 "CSS 규칙 수정"을 입력하십시오.

jQuery ()로 document.styleSheets [0]을 래핑하려고 시도하면 어떻게 될지 확실하지 않습니다.

cssRule 플러그인을 사용할 수 있습니다 . 코드는 간단했다 :

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

지금까지의 의견 중 하나가 왜 그런 일을하고 싶은지 물었습니다. 예를 들어, 각 항목이 런타임까지 열 수를 알 수없는 고유 한 배경색 (예 : GCal의 캘린더 목록)이 필요한 목록에 대한 스타일을 작성합니다.

이 json 객체로 색상을 명령하는 설정이 있습니다.

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

이 기능

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("\n"))
    )
}

이 스타일 요소를 생성

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

CSS 클래스에 display : none을 지정하지 않으려는 경우 스타일에 추가하는 올바른 방법 인 jQuery.Rule이 작업을 수행합니다.

필자는 경우에 따라 아약스 컨텐츠의 추가 이벤트 전에 스타일을 적용하고 추가 후 컨텐츠를 페이드하고 싶습니다.

다음은 CSS 클래스의 전체 정의를 얻는 함수입니다.

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '';
};

cssobj 라는이 lib를 사용할 수 있습니다

var result = cssobj({'#my-window': {
  position: 'fixed',
  zIndex: '102',
  display:'none',
  top:'50%',
  left:'50%'
}})

언제든지 다음과 같이 규칙을 업데이트 할 수 있습니다.

result.obj['#my-window'].display = 'block'
result.update()

그런 다음 규칙이 변경되었습니다. jQuery는 이것을하는 lib가 아닙니다.

최근 에이 중 일부를 엉망으로 삼았으며 iPhone / iPod 사이트를 프로그래밍 할 때 두 가지 다른 접근법을 사용했습니다.

방향 변경을 찾을 때 내가 처음 접한 방법은 전화가 세로인지 가로인지를 확인할 수있는 매우 정적 인 방법이지만 간단하고 영리합니다.

CSS에서 :

#content_right,
#content_normal{
 display:none;
}

JS 파일에서 :

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

PHP / HTML에서 (JS 파일을 먼저 가져온 다음 body 태그로 가져 오기) :

<body onorientationchange="updateOrientation();">

기본적으로 JS 파일에서 주어진 결과에 따라 실행할 다른 사전 설정된 CSS 블록을 선택합니다.

또한 내가 선호하는보다 역동적 인 방법은 스크립트 태그 또는 JS 파일에 매우 간단한 추가 방법이었습니다.

document.getelementbyid(id).style.backgroundColor = '#ffffff';

이것은 대부분의 브라우저에서 작동하지만 IE의 경우 탄탄한 탄약을 제거하는 것이 가장 좋습니다.

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

또는 getElementByClass()다양한 항목을 사용 하고 변경할 수 있습니다 .

도움이 되었기를 바랍니다!

금연 건강 증진 협회.

스타일 정보를 CSS 파일의 별도 클래스에 넣을 수 있습니다.

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

그런 다음이 클래스 이름을 요소에 추가하기로 선택한 시점에서 jQuery를 사용합니까?

모든 CSS가 포함 된 .fixed-object와 같은 CSS 클래스를 만들 수 있습니다 ...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

그런 다음 jquery에서 언제든지 스타일을 가지기를 원할 때 해당 클래스를 추가하십시오 ...

$(#my-window).addClass('fixed-object');

내가해야 할 일을 오해하지 않는 한 가장 쉬운 방법 인 것 같습니다.

jquery에서 .addClass ()를 사용하면 페이지의 요소에 스타일을 동적으로 추가 할 수 있습니다. 예. 우리는 스타일이 있습니다

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

이제 jquery의 준비 상태에서 .addClass (myStyle)과 같은 CSS를 추가 할 수 있습니다