[jquery] 런타임시 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);
});