런타임에 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 규칙을 수 요?), 하만지어떻재완사가용한까능 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를 객체에 적용할 수 있습니다.따라서 다음과 같이 Javascript에서 개체를 정의할 수 있습니다.
var my_css_class = { backgroundColor : 'blue', color : '#fff' };
그런 다음 원하는 모든 요소에 적용합니다.
$("#myelement").css(my_css_class);
그래서 재사용이 가능합니다.그런데 당신은 어떤 목적으로 이것을 하겠습니까?
dottoro에 따르면 IE < 9를 지원할 필요가 없는 경우 insertRule을 사용할 수 있습니다.저쪽에도 약간의 크로스 브라우저 코드가 있습니다.
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%"
}
});
CSS를 CSS 블록/파일로 하드코딩하지 않으려면 jQuery를 사용하여 HTML Elements, ID 및 Class에 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);
});
여기와 여기에 설명된 개념을 사용하기 때문에 다른 답변과 비교하면 새로운 것은 아니지만 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가 필요한 jQuery 위젯을 생성하는 경우에 유용합니다(예: 특정 위젯에 대한 기존 jQueryUI CSS 프레임워크 확장).이 솔루션은 Taras의 답변(위의 첫 번째 답변)을 기반으로 합니다.
HTML 마크업에 ID가 "addrule"인 버튼과 ID가 "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");
}
이 접근 방식의 장점은 코드의 변수 CSS 규칙을 재사용하여 원하는 대로 규칙을 추가하거나 뺄 수 있다는 것입니다.css 규칙이 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()
주의사항:
- 크롬과 IE10에서 사용한 적이 있습니다.이전 버전의 IE에서 잘 작동하기 위해서는 약간의 수정이 필요할 것 같습니다.에는 IE가 수 .
s.cssRules정의됨, 그래서 그들은 다시 속하게 될 것입니다.s.rules는 쉼표로 구분된홀수/예 들 어 버 구 선 관 홀 된 택 기 와 수 있 동 /습 기 같 작 과 니 특 이 성 가 다 몇 지 은 를 쉼 표 delim 분 련 된 로 ▁related ▁which gy ▁has ▁some ities , 예 버 bug ors / - ▁peculiar 습 있 니 를 기, ▁behavior , 쉼"body, p"만약 당신이 그것들을 피한다면, 당신은 수정 없이 이전 IE 버전에서 괜찮을 수도 있지만, 나는 아직 그것을 테스트하지 않았습니다. - 는 정확하게목록을 하십시오. 현재실는정일합니야 . 소문자를 사용하고 쉼표로 구분된 목록을 주의하십시오. 순서는 일치해야 하며 형식이어야 합니다.
"first, second"즉, 구분 기호는 쉼표 뒤에 공백 문자가 옵니다. - 쉼표로 구분된 목록에 있는 선택기와 같이 중복되는 선택기를 감지하고 지능적으로 처리하기 위해 시간을 더 들일 수 있습니다.
- 와 "" "" " " " " "에 할 수 .
!important문제가 없는 수식어입니다.
이 기능을 개선하고 싶다면, https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet 에서 유용한 API 문서를 찾을 수 있습니다.
테마 빌더 앱과 같이 스타일을 자주 동적으로 변경하고 싶은 (비정상적인) 경우, <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
또한, 구글에 "css 규칙 수정"을 입력해 보세요.
jQuery()로 document.styleSheets[0]를 감쌀 경우 어떤 일이 발생할지 확신할 수 없습니다.
cssRule 플러그인을 사용할 수 있습니다.코드는 간단했습니다.
$.cssRule("#my-window {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}");
지금까지 댓글 중 하나가 왜 그런 일을 하고 싶냐고 물었습니다.예를 들어, 각 항목에 고유한 배경색이 필요한 목록에 대한 스타일 작성(예:실행 시간까지 열 수를 알 수 없는 GCal의 달력 목록).
당신은 csobj라고 불리는 이 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가 아닙니다.
이 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);}
표시를 할당하지 않으려면: 없음, 스타일에 추가할 올바른 접근법, jQuery.규칙이 그 일을 합니다.
아약스 콘텐츠의 추가 이벤트 전에 스타일을 적용하고 추가 후 콘텐츠를 페이드하고 싶은 경우가 있습니다!
여기에 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 '';
};
저는 최근에 이것들 중 일부를 엉망으로 만들었고 아이폰/아이팟 사이트를 프로그래밍할 때 두 가지 다른 접근법을 사용했습니다.
전화기가 세로인지 가로인지 알 수 있도록 방향 변경을 찾을 때 처음 접한 방법은 매우 정적인 방법이지만 간단하고 영리합니다.
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 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()항목 범위를 변경할 수 있습니다.
이것이 도움이 되길 바랍니다!
재.
여기 게시판에 언급된 플러그인을 사용하지 않으려면 다음과 같은 간단한 기능을 사용할 수 있습니다.
var addStyle = function (style) {
var allStyles = new Array();
$.each(style, function (selector, rules) {
var arr = $.map(rules, function (value, prop) { return " " + prop + ": " + value + ";"; });
allStyles.push(selector + " {\n" + arr.join("\n") + "\n}");
});
$("<style>").prop("type", "text/css").html(allStyles.join("\n")).appendTo("head");
};
그런 다음 전화합니다.
addStyle({
"#my-window": {
"position": "fixed",
"z-index": 102,
"display": "none",
"top": "50%",
"left": "50%"
}
});
HTML로 표시되는 방식은 다음과 같습니다.
<style type="text/css">
#my-window {
position: fixed;
z-index: 102;
display: none;
top: 50%;
left: 50%;
}
</style>
저는 여기 게시판에 있는 몇 가지 답변에서 영감을 받았습니다. 예를 들어 "appendTo" 부분은 여기에서 차용되었습니다.
아마도 당신은 스타일 정보를 당신의 css 파일에 별도의 클래스에 넣을 수 있습니다. 예를 들어:
.specificstyle {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
그런 다음 이 클래스 이름을 요소에 추가하기로 선택한 시점에서 jQuery를 사용하시겠습니까?
.fixed-object라는 이름의 css 클래스를 만들 수 있습니다. css 클래스에 모든 css가 포함되어 있습니다.
.fixed-object{
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
그럼 언제든지 질문을 해보세요 그 스타일을 원하신다면 그 클래스를 추가해주세요...
$(#my-window).addClass('fixed-object');
제가 당신이 해야 할 일을 오해하고 있는 것이 아니라면, 그것이 가장 쉬운 방법인 것 같습니다.
jquery에서 .addClass()를 사용하면 페이지의 요소에 스타일을 동적으로 추가할 수 있습니다.예. 우리는 스타일이 있습니다.
.myStyle
{
width:500px;
height:300px;
background-color:red;
}
이제 jquery 준비 상태에서 .addClass(myStyle)와 같은 css를 추가할 수 있습니다.
언급URL : https://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime
'programing' 카테고리의 다른 글
| 폼을 사용하지 않고 POST 변수 설정 (0) | 2023.07.25 |
|---|---|
| C에서 *와 &의 차이점은 무엇입니까? (0) | 2023.07.25 |
| Python을 사용하여 기존 PDF에 텍스트 추가 (0) | 2023.07.20 |
| 파이썬의 요청 모듈을 사용하여 웹 사이트에 "로그인"하는 방법은 무엇입니까? (0) | 2023.07.20 |
| 두 개의 데이터 프레임을 병합하려고 하지만 ValueError를 가져옵니다. (0) | 2023.07.20 |