Tạo một quy tắc / lớp CSS với jQuery khi chạy

Thông thường tôi có một tệp CSS có quy tắc sau:

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

Làm thế nào tôi có thể tránh việc tạo một tệp CSS tĩnh như vậy bằng cách thêm thông tin CSS trong các hành động thời gian chạy vào phần thân hoặc một cái gì đó tương tự? (chỉ sử dụng jQuery)

Tôi muốn định nghĩa nó một lần nhưng với jQuery và sử dụng nó nhiều lần sau đó; đó là lý do tại sao tôi không muốn thêm nó mỗi lần vào các thành phần DOM cụ thể.

Tôi biết các tính năng đơn giản ( css("attr1", "value");), nhưng làm cách nào tôi có thể tạo quy tắc CSS có thể sử dụng lại hoàn chỉnh?

Bạn có thể tạo thành phần kiểu và chèn nó vào DOM

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

đã thử nghiệm trên Opera10 FF3.5 iE8 iE6

Đơn giản

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

Thông báo các dấu gạch chéo trở lại? Chúng được sử dụng để nối các chuỗi trên các dòng mới. Để chúng ra ngoài tạo ra một lỗi.

bạn có thể áp dụng css một đối tượng. Vì vậy, bạn có thể xác định đối tượng của mình trong javascript như thế này:

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

Và sau đó chỉ cần áp dụng nó cho tất cả các yếu tố bạn muốn

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

Vì vậy, nó có thể tái sử dụng. Mục đích gì bạn sẽ làm điều này cho mặc dù?

Bạn có thể sử dụng insertRule nếu bạn không cần hỗ trợ IE <9, theo dottoro . Có một chút mã trình duyệt chéo ở đó là tốt.

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

Đây là một plugin jquery cho phép bạn tiêm CSS:

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

Thí dụ:

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

Đây không phải là bất cứ điều gì mới so với một số câu trả lời khác vì nó sử dụng khái niệm được mô tả ở đây và ở đây , nhưng tôi muốn sử dụng khai báo kiểu JSON:

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

Sử dụng:

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

Tôi không chắc liệu nó có bao gồm tất cả các khả năng của CSS hay không, nhưng cho đến nay nó vẫn hoạt động với tôi. Nếu không, hãy coi đó là điểm khởi đầu cho nhu cầu của riêng bạn. :)

Nếu bạn không muốn mã hóa CSS thành một khối / tệp CSS, bạn có thể sử dụng jQuery để tự động thêm CSS vào các phần tử HTML, ID và Class.

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

Thêm quy tắc tùy chỉnh sẽ hữu ích nếu bạn tạo tiện ích jQuery yêu cầu CSS tùy chỉnh (chẳng hạn như mở rộng khung CSS jQueryUI hiện có cho tiện ích cụ thể của bạn). Giải pháp này dựa trên câu trả lời của Taras (câu đầu tiên ở trên).

Giả sử đánh dấu HTML của bạn có một nút có id là "addrule" và div có id là "target" chứa một số văn bản:

Mã 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");     
}       

Ưu điểm của phương pháp này là bạn có thể sử dụng lại các cssrules biến trong mã của mình để thêm hoặc bớt các quy tắc theo ý muốn. Nếu cssrules được nhúng vào một đối tượng liên tục, chẳng hạn như tiện ích jQuery, bạn có một biến cục bộ liên tục để làm việc.

Lưu ý rằng jQuery().css()không thay đổi quy tắc biểu định kiểu, nó chỉ thay đổi kiểu của từng thành phần phù hợp.

Thay vào đó, đây là một hàm javascript tôi đã viết để sửa đổi các quy tắc biểu định kiểu.

    /**
     * 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);
        }
    }

Ưu điểm:

• Các kiểu có thể được tính toán trong một <head>tập lệnh trước khi các thành phần DOM được tạo và do đó trước khi kết xuất tài liệu đầu tiên, tránh kết xuất gây khó chịu trực quan, sau đó tính toán, sau đó kết xuất lại. Với jQuery, bạn phải đợi các phần tử DOM được tạo, sau đó tạo kiểu lại và kết xuất lại chúng.
• Các thành phần được thêm động sau khi restyle sẽ tự động áp dụng các kiểu mới mà không cần gọi thêm jQuery(newElement).css()

Hãy cẩn thận:

• Tôi đã sử dụng nó trên Chrome và IE10. Tôi nghĩ rằng nó có thể cần một chút sửa đổi để làm cho nó hoạt động tốt trên các phiên bản IE cũ hơn. Cụ thể, các phiên bản IE cũ hơn có thể chưa s.cssRulesđược xác định, vì vậy chúng sẽ quay trở lại s.rulescó một số đặc thù, chẳng hạn như hành vi kỳ quặc / lỗi liên quan đến các bộ chọn được phân cách bằng dấu phẩy, như thế nào "body, p". Nếu bạn tránh những thứ đó, bạn có thể ổn trong các phiên bản IE cũ hơn mà không cần sửa đổi, nhưng tôi chưa thử nghiệm nó.
• Các bộ chọn hiện tại cần khớp chính xác: sử dụng chữ thường và cẩn thận với các danh sách được phân cách bằng dấu phẩy; thứ tự cần phải khớp và chúng phải ở định dạng "first, second"tức là dấu phân cách là dấu phẩy theo sau là ký tự khoảng trắng.
• Một người có lẽ có thể dành thêm thời gian cho nó để cố gắng phát hiện và xử lý thông minh các bộ chọn chồng chéo, chẳng hạn như các bộ chọn trong danh sách được phân cách bằng dấu phẩy.
• Người ta cũng có thể thêm hỗ trợ cho các truy vấn phương tiện và công cụ !importantsửa đổi mà không gặp quá nhiều khó khăn.

Nếu bạn cảm thấy muốn thực hiện một số cải tiến cho chức năng này, bạn sẽ tìm thấy một số tài liệu API hữu ích tại đây: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Trong các trường hợp (không bình thường) mà bạn muốn có thể thay đổi động thường xuyên - ví dụ: ứng dụng xây dựng chủ đề - thêm thẻ <style> hoặc gọi CSSStyleSheet.insertRule () sẽ dẫn đến biểu định kiểu đang phát triển, có thể có hiệu suất và thiết kế hàm ý gỡ lỗi.

Cách tiếp cận của tôi chỉ cho phép một quy tắc duy nhất cho mỗi bộ chọn / kết hợp thuộc tính, xóa mọi quy tắc hiện có khi đặt bất kỳ quy tắc nào. API rất đơn giản và linh hoạt:

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;
}

Sử dụng:

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

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

Điều gì sẽ xảy ra nếu bạn tự động viết một phần <script> trên trang của mình (với các quy tắc động của bạn) và sau đó sử dụng jQuery .addClass (lớp) để thêm các quy tắc được tạo động đó?

Tôi đã không thử điều này, chỉ đưa ra một lý thuyết có thể hoạt động.

Một chút lười biếng trả lời điều này, nhưng bài viết sau đây có thể giúp: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Ngoài ra, hãy thử gõ "sửa đổi quy tắc css" vào google

Không chắc chắn điều gì sẽ xảy ra nếu bạn cố gắng bọc tài liệu.styleSheets [0] bằng jQuery () mặc dù bạn có thể thử nó

Bạn có thể sử dụng trình cắm cssRule . Các mã đã đơn giản sau đó:

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

Một trong những ý kiến ​​cho đến nay đã hỏi tại sao một người muốn làm một điều như vậy. Ví dụ: tạo kiểu cho danh sách trong đó mỗi mục cần có màu nền riêng biệt (ví dụ: danh sách lịch của GCal) trong đó số lượng cột không được biết cho đến thời gian chạy.

Đây là một thiết lập cung cấp lệnh cho màu sắc với đối tượng json này

 "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)"]
  }

Chức năng này

 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"))
    )
}

để sản xuất yếu tố phong cách này

.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);}

nếu bạn không muốn chỉ định một màn hình: không có gì cho lớp css, cách tiếp cận phù hợp để chắp thêm kiểu, jQuery.Rule thực hiện công việc.

Tôi một số trường hợp bạn muốn áp dụng các cọc trước sự kiện chắp thêm nội dung ajax và làm mờ nội dung sau khi nối và đây là nó!

Ở đây bạn có một hàm để có được định nghĩa đầy đủ của một lớp 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 '';
};

Bạn có thể sử dụng lib này được gọi là cssobj

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

Bất cứ lúc nào bạn có thể cập nhật các quy tắc của mình như thế này:

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

Sau đó, bạn đã thay đổi quy tắc. jQuery không phải là lib làm điều này.

Gần đây tôi đã gặp rắc rối với một số điều này và tôi đã sử dụng hai cách tiếp cận khác nhau khi lập trình một trang web iPhone / iPod.

Cách đầu tiên tôi bắt gặp khi tìm kiếm thay đổi hướng để bạn có thể xem điện thoại là dọc hay ngang, đây là một cách rất tĩnh nhưng đơn giản và thông minh:

Trong CSS:

#content_right,
#content_normal{
 display:none;
}

Trong tệp tin 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);
}

Trong PHP / HTML (Trước tiên, nhập tệp JS của bạn sau đó vào thẻ body):

<body onorientationchange="updateOrientation();">

Về cơ bản, điều này chọn một khối CSS được thiết lập sẵn khác để chạy tùy thuộc vào kết quả được trả về từ tệp JS.

Ngoài ra, cách năng động hơn mà tôi ưa thích là một bổ sung rất đơn giản vào thẻ script hoặc tệp JS của bạn:

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

Điều này hoạt động với hầu hết các trình duyệt nhưng đối với IE, tốt nhất là lấy đi đạn dược với thứ gì đó chặt chẽ hơn:

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

Hoặc bạn có thể sử dụng getElementByClass()và thay đổi một loạt các mặt hàng.

Hi vọng điêu nay co ich!

Tro.

Có lẽ bạn có thể đặt thông tin kiểu trong một lớp riêng trong tệp css của mình, ví dụ:

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

và sau đó sử dụng jQuery tại điểm bạn chọn để thêm tên lớp này vào phần tử?

Bạn chỉ có thể tạo một lớp css được gọi là một cái gì đó như .fixed-object có tất cả css của bạn trong đó ...

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

Sau đó, trong jquery bất cứ lúc nào bạn muốn một cái gì đó có phong cách đó, chỉ cần thêm lớp đó vào nó ...

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

Đó dường như là cách dễ nhất để làm điều đó, trừ khi tôi hiểu sai những gì bạn cần làm.

Bằng cách sử dụng .addClass () trong jquery, chúng ta có thể tự động thêm kiểu vào các thành phần trên trang. ví dụ. chúng tôi có phong cách

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

Bây giờ trong trạng thái sẵn sàng của jquery, chúng ta có thể thêm css như .addClass (myStyle)