สร้างกฎ / คลาส CSS ด้วย jQuery ตอนรันไทม์

ฉันมักจะมีไฟล์ 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)

นี่คือปลั๊กอิน jquery ที่ให้คุณฉีด CSS:

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 แต่จนถึงตอนนี้มันใช้ได้สำหรับฉัน หากไม่มีให้ลองพิจารณาเป็นจุดเริ่มต้นสำหรับความต้องการของคุณเอง :)

หากคุณไม่ต้องการ hardcode CSS ลงในบล็อก / ไฟล์ CSS คุณสามารถใช้ jQuery เพื่อเพิ่ม CSS ในองค์ประกอบ HTML, ID และคลาสได้แบบไดนามิก

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

การเพิ่มกฎที่กำหนดเองมีประโยชน์ถ้าคุณสร้างวิดเจ็ต jQuery ที่ต้องการ CSS แบบกำหนดเอง (เช่นการขยายเฟรมเวิร์ก jQueryUI CSS ที่มีอยู่สำหรับวิดเจ็ตเฉพาะของคุณ) วิธีแก้ปัญหานี้สร้างขึ้นจากคำตอบของ Taras (คำตอบแรกข้างต้น)

สมมติว่ามาร์กอัป HTML ของคุณมีปุ่มที่มีรหัส "addrule" และ div ที่มี id ของ "เป้าหมาย" ที่มีข้อความบางส่วน:

รหัส 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");     
}       

ข้อดีของวิธีนี้คือคุณสามารถใช้ cssrules ตัวแปรในรหัสของคุณเพื่อเพิ่มหรือลบกฎตามที่ต้องการ หาก 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 ที่จะสร้างจากนั้นทำการจัดรูปแบบและสร้างการแสดงผลอีกครั้ง
• องค์ประกอบที่เพิ่มแบบไดนามิกหลังจาก restyle จะมีการใช้สไตล์ใหม่โดยอัตโนมัติโดยไม่ต้องเรียกใช้เพิ่มเติม 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

นอกจากนี้ลองพิมพ์ "แก้ไขกฎ CSS" ลงใน google

ไม่แน่ใจว่าจะเกิดอะไรขึ้นหากคุณพยายามห่อเอกสาร styleSheets [0] ด้วย jQuery () แม้ว่าคุณจะลองดูก็ตาม

คุณสามารถใช้ที่cssRule Plug-in รหัสนั้นง่ายแล้ว:

$.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 วิธีที่ถูกต้องในการผนวกเข้ากับสไตล์ jQuery.Rule ทำงาน

ฉันมีบางกรณีที่คุณต้องการใช้ stiles ก่อนที่จะเพิ่มเนื้อหาของ ajax และ fade content หลังจากผนวกและนี่คือมัน!

ที่นี่คุณมีฟังก์ชั่นเพื่อรับนิยามเต็มของคลาส 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 '';
};

คุณสามารถใช้ lib นี้เรียกว่า cssobj

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 onorientationchange="updateOrientation();">

โดยทั่วไปจะเลือกบล็อก CSS ชุดที่แตกต่างกันเพื่อให้ทำงานโดยขึ้นอยู่กับผลลัพธ์ที่ได้รับจากไฟล์ JS

วิธีที่มีไดนามิกมากกว่าที่ฉันต้องการคือการเพิ่มแท็กสคริปต์หรือไฟล์ 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 ที่เรียกว่า. editor-object ที่มี css ทั้งหมดอยู่ในนั้น ...

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

จากนั้นใน jQuery ทุกครั้งที่คุณต้องการบางสิ่งบางอย่างที่จะมีสไตล์นั้นเพียงแค่เพิ่มระดับนั้น ...

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

นั่นเป็นวิธีที่ง่ายที่สุดในการทำเว้นแต่ฉันจะเข้าใจผิดว่าคุณต้องทำอะไร

โดยใช้. addClass () ใน jquery เราสามารถเพิ่มสไตล์ให้กับองค์ประกอบในหน้าเว็บ เช่น. เรามีสไตล์

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

ขณะนี้อยู่ในสถานะพร้อมของ jquery เราสามารถเพิ่ม css เช่น. addClass (myStyle)