Thay đổi giá trị CSS bằng Javascript

105

Thật dễ dàng để đặt các giá trị CSS nội tuyến bằng javascript. Nếu tôi muốn thay đổi chiều rộng và tôi có html như thế này:

<div style="width: 10px"></div>

Tất cả những gì tôi cần làm là:

document.getElementById('id').style.width = value;

Nó sẽ thay đổi các giá trị biểu định kiểu nội tuyến. Thông thường, đây không phải là vấn đề, vì kiểu nội tuyến ghi đè biểu định kiểu. Thí dụ:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Sử dụng Javascript này:

document.getElementById('tId').style.width = "30%";

Tôi nhận được như sau:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

Đây là một vấn đề, bởi vì tôi không chỉ không muốn thay đổi các giá trị nội dòng, Nếu tôi tìm kiếm chiều rộng trước khi đặt nó, khi tôi có:

<div id="tId"></div>

Giá trị được trả về là Null, vì vậy nếu tôi có Javascript cần biết chiều rộng của thứ gì đó để thực hiện một số logic (tôi tăng chiều rộng lên 1%, không phải giá trị cụ thể), sẽ nhận lại Null khi tôi mong đợi chuỗi "50% "không thực sự hiệu quả.

Vì vậy, câu hỏi của tôi: Tôi có các giá trị trong kiểu CSS không nằm trong dòng, làm cách nào để lấy các giá trị này? Làm cách nào tôi có thể sửa đổi kiểu thay vì các giá trị nội dòng, đã cho một id?

— Coltin
nguồn

bạn có thể chỉnh sửa bài viết của bạn? có một số câu không đầy đủ ngay từ đầu, không chắc chắn những gì bạn đang tìm kiếm ...

— Jason S

Tôi vẫn hơi bối rối về những gì bạn đang hỏi. Bạn đang hỏi 1) thay đổi chính CSS sẽ thay đổi tất cả các phần tử cùng một lúc? hoặc 2) để thay đổi CSS cho một mục duy nhất tại một thời điểm?

— Mike

Tôi cũng bối rối, đối với câu hỏi thực tế. Kiểu hiện tại của một đối tượng không nhất thiết phải giống với thuộc tính 'style' của thẻ.

— MattJ

Xin lỗi tôi sẽ chỉnh sửa nó để rõ ràng hơn. Tôi không muốn đặt CSS nội tuyến. Tôi muốn có thể tăng / giảm chiều rộng của kiểu. Tôi sẽ chỉnh sửa với một ví dụ đầy đủ về những gì tôi đang tìm kiếm.

— Coltin 19/02/09

Câu trả lời Codepen của codepen.io/quezo/post/dynamically-updating-css

— Nick Mitchell

90

Được rồi, có vẻ như bạn muốn thay đổi CSS chung để thay đổi hiệu quả tất cả các phần tử của kiểu peticular cùng một lúc. Gần đây tôi đã học cách tự làm điều này từ hướng dẫn của Shawn Olson . Bạn có thể tham khảo trực tiếp mã của mình tại đây .

Đây là tóm tắt:

Bạn có thể truy xuất các bảng định kiểu thông qua document.styleSheets. Điều này thực sự sẽ trả về một mảng tất cả các biểu định kiểu trong trang của bạn, nhưng bạn có thể biết mình đang ở trên biểu định kiểu nào thông qua thuộc document.styleSheets[styleIndex].hreftính. Khi bạn đã tìm thấy biểu định kiểu mà bạn muốn chỉnh sửa, bạn cần lấy mảng quy tắc. Đây được gọi là "quy tắc" trong IE và "cssRules" trong hầu hết các trình duyệt khác. Cách để biết CSSRule bạn đang sử dụng là thuộc selectorTexttính. Mã làm việc trông giống như sau:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Hãy cho tôi biết cách này hoạt động cho bạn, và vui lòng bình luận nếu bạn thấy bất kỳ lỗi nào.

— Mike
nguồn

1

Thay đổi CSS theo cách này sẽ nhanh hơn nhiều nếu bạn có hơn 100 phần tử. Ví dụ: thay đổi tất cả các ô trong một phần nhất định của bảng cùng một lúc.

— EdH

5

Tôi không thể tìm thấy rule.valuetrong FF 20. rule.styleTuy nhiên, có, có thể cài đặt và hoạt động như thế nào element.style. Cf https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule . Kiểm tra rule.type == rule.STYLE_RULEcũng có thể là một ý tưởng hay trước khi truy cập rule.selectorText.

— Christian Aichinger

1

ĐIỀU ĐÓ THẬT TUYỆT! Tôi đang làm việc về chuyển đổi hình ảnh và CSS thực sự chậm lại khi bạn bắt đầu đặt một hình ảnh lớn vào 36 URI riêng biệt để cắt. Điều này chỉ làm mất rất nhiều chi phí kịch bản của tôi. Cảm ơn!

— Jason Maggard

1

Vào năm 2016, hãy sử dụng cái này: developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/…

— the_web

document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};đã làm việc cho tôi, cảm ơn!

— Pavel

43

Xin vui lòng! Chỉ cần hỏi w3 ( http://www.quirksmode.org/dom/w3c_css.html )! Hoặc thực ra, tôi đã mất năm giờ ... nhưng đây rồi!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

Chức năng này thực sự dễ sử dụng .. ví dụ:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

Oh..

CHỈNH SỬA: như @ user21820 được mô tả trong câu trả lời của nó, có thể hơi không cần thiết khi thay đổi tất cả các bảng định kiểu trên trang. Tập lệnh sau hoạt động với IE5.5 cũng như Google Chrome mới nhất và chỉ thêm hàm css () được mô tả ở trên.

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);

— Leonard Pauli
nguồn

Nghiêm túc thực hiện dễ dàng. Cảm ơn

— Kaleb Anderson

1

Có lý do gì để sửa đổi mọi biểu định kiểu thay vì chỉ một biểu định kiểu mới được tạo như trong câu trả lời của tôi không?

— dùng21820

Thực hiện rất tốt đẹp. Kudos cho bạn, thưa ngài.

— Jason Maggard

1

@ user21820, chắc là không. Tôi đoán tôi thực sự muốn được ở bên an toàn .. trả lời cuối cùng cập nhật, thanh danh cho bạn :)

— Leonard Pauli

10

Thu thập mã trong các câu trả lời, tôi đã viết hàm này có vẻ chạy tốt trên FF 25 của tôi.

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

Đây là một cách để đặt các giá trị trong css sẽ được sử dụng trong JS ngay cả khi trình duyệt không hiểu. ví dụ: maxHeight cho một tbody trong một bảng được cuộn.

Gọi :

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

— FrViPofm
nguồn

1

Nếu kiểu được nhúng trong trang HTML, thì kiểu document.styleSheets[m].hrefnày sẽ là rỗng và không thành công.

— JCM

4

Tôi không biết tại sao các giải pháp khác đi qua toàn bộ danh sách các bảng định kiểu cho tài liệu. Làm như vậy sẽ tạo một mục mới trong mỗi biểu định kiểu, điều này không hiệu quả. Thay vào đó, chúng tôi có thể chỉ cần thêm một biểu định kiểu mới và chỉ cần thêm các quy tắc CSS mong muốn của chúng tôi vào đó.

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

Lưu ý rằng chúng tôi có thể ghi đè ngay cả các kiểu nội tuyến được đặt trực tiếp trên các phần tử bằng cách thêm "! Important" vào giá trị của thuộc tính, trừ khi đã tồn tại các khai báo kiểu "! Important" cụ thể hơn cho thuộc tính đó.

— người dùng21820
nguồn

1

Xem developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… để biết phiên bản phức tạp hơn.

— dùng21820

1

Rất đúng. Đảm bảo sử dụng .addRule (bộ chọn, thuộc tính + ':' + value) nếu .insertRule không thành công (đối với hỗ trợ trước IE9).

— Leonard Pauli

3

Tôi không có đủ đại diện để bình luận vì vậy tôi sẽ định dạng một câu trả lời, nhưng nó chỉ là một minh chứng cho vấn đề được đề cập.

Có vẻ như, khi các kiểu phần tử được xác định trong các bảng định kiểu, chúng sẽ không hiển thị với getElementById ("someElement"). Style

Mã này minh họa sự cố ... Mã từ bên dưới trên jsFiddle .

Trong Thử nghiệm 2, trong lần gọi đầu tiên, giá trị của các mục còn lại là không xác định, và do đó, một nút chuyển đổi đơn giản sẽ bị lộn xộn. Để sử dụng, tôi sẽ xác định nội tuyến các giá trị kiểu quan trọng của mình, nhưng nó dường như đã đánh bại một phần mục đích của biểu định kiểu.

Đây là mã trang ...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

Tôi hy vọng điều này sẽ giúp làm sáng tỏ vấn đề.

Nhảy

— BentFX
nguồn

2

Bạn có thể nhận được các kiểu "tính toán" của bất kỳ phần tử nào.

IE sử dụng một thứ gọi là "currentStyle", Firefox (và tôi cho rằng các trình duyệt "tuân thủ tiêu chuẩn" khác) sử dụng "defaultView.getComputedStyle".

Bạn sẽ cần viết một hàm trình duyệt chéo để thực hiện việc này hoặc sử dụng một khuôn khổ Javascript tốt như nguyên mẫu hoặc jQuery (tìm kiếm "getStyle" trong tệp javascript nguyên mẫu và "curCss" trong tệp javascript jquery).

Điều đó nói rằng nếu bạn cần chiều cao hoặc chiều rộng, bạn có thể nên sử dụng element.offsetHeight và element.offsetWidth.

Giá trị được trả về là Null, vì vậy nếu tôi có Javascript cần biết chiều rộng của thứ gì đó để thực hiện một số logic (tôi tăng chiều rộng lên 1%, không phải giá trị cụ thể)

Lưu ý, nếu bạn thêm một kiểu nội tuyến vào phần tử được đề cập, nó có thể hoạt động như giá trị "mặc định" và sẽ có thể đọc được bằng Javascript khi tải trang, vì nó là thuộc tính kiểu nội tuyến của phần tử:

<div style="width:50%">....</div>

0

Ý chính 32 dòng đơn giản này cho phép bạn xác định một biểu định kiểu nhất định và thay đổi kiểu của nó rất dễ dàng:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");

— solendil
nguồn

0

Tôi chưa bao giờ thấy bất kỳ cách sử dụng thực tế nào của điều này, nhưng bạn có thể nên xem xét các bảng định kiểu DOM . Tuy nhiên, tôi thành thật nghĩ rằng đó là quá mức cần thiết.

Nếu bạn chỉ muốn lấy chiều rộng và chiều cao của một phần tử, bất kể kích thước đang được áp dụng từ đâu, chỉ cần sử dụng element.offsetWidthvà element.offsetHeight.

— Rakesh Pai
nguồn

Cách sử dụng của tôi: <style> #tid {width: 10%; } </style> <div id = 'tid' onclick = "lift ('tid')"> </div> tăng sẽ kiểm tra xem chiều rộng có <100% hay không, nếu vậy, nó sẽ tăng 1%. document.getElementById.style.width trả về giá trị null vì không có giá trị nội dòng. Có cách nào đơn giản hơn DOM Stylesheets không?

— Coltin 19/02/09

0

Có lẽ hãy thử điều này:

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

— Shaq
nguồn