Javascript ile CSS Değerlerini Değiştirme

105

Satır içi CSS değerlerini javascript ile ayarlamak kolaydır. Genişliği değiştirmek istersem ve bunun gibi html'im varsa:

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

Tek yapmam gereken:

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

Satır içi stil sayfası değerlerini değiştirecektir. Normalde bu bir sorun değildir çünkü satır içi stil, stil sayfasını geçersiz kılar. Misal:

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

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

Bu Javascript'i kullanarak:

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

Aşağıdakileri alıyorum:

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

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

Bu bir sorundur, çünkü yalnızca satır içi değerleri değiştirmek istemiyorum, Genişliği ayarlamadan önce ararsam, elimde:

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

Döndürülen değer Null, yani bir mantık yapmak için bir şeyin genişliğini bilmem gereken Javascript'im varsa (genişliği belirli bir değere değil,% 1 artırıyorum), "% 50" dizesini beklediğimde Null geri alıyorum "gerçekten işe yaramıyor.

Öyleyse sorum: Bir CSS stilinde satır içi olmayan değerlerim var, bu değerleri nasıl elde edebilirim? Bir id verildiğinde satır içi değerler yerine stili nasıl değiştirebilirim?

javascript  html  css  ajax  dom 
— Coltin
kaynak
gönderinizi düzenleyebilir misiniz? başlangıçta bazı tamamlanmamış cümleler var, ne aradığından emin değilim ...
— Jason S
Hala ne istediğin konusunda kafam biraz karıştı. 1) Tüm öğeleri aynı anda değiştirecek olan CSS'nin kendisini değiştirmesini mi istiyorsunuz? veya 2) bir defada tek bir öğe için CSS'yi değiştirmek için?
— Mike
Asıl soru konusunda da kafam karıştı. Bir nesnenin mevcut stili, etiketin 'stil' niteliği ile aynı olmak zorunda değildir.
— MattJ
Üzgünüm, daha net olması için düzenleyeceğim. Satır içi CSS ayarlamak istemiyorum. Stilin genişliğini artırmak / azaltmak istiyorum. Aradığım şeyin tam bir örneğiyle düzenleyeceğim.
— Coltin
— Nick Mitchell

Yanıtlar:

90

Tamam, petiküler stilin tüm unsurlarını aynı anda etkili bir şekilde değiştirecek şekilde genel CSS'yi değiştirmek istiyormuşsunuz gibi geliyor. Yakın zamanda bunu Shawn Olson eğitiminden kendim öğrendim . Doğrudan koduna buradan başvurabilirsiniz .

İşte özet:

Stil sayfalarını aracılığıyla geri alabilirsiniz document.styleSheets. Bu aslında sayfanızdaki tüm stil sayfalarının bir dizisini döndürecektir, ancak document.styleSheets[styleIndex].hrefmülk aracılığıyla hangisinde olduğunuzu anlayabilirsiniz . Düzenlemek istediğiniz stil sayfasını bulduğunuzda, kurallar dizisini almanız gerekir. Bu, IE'de "kurallar" ve diğer tarayıcıların çoğunda "cssRules" olarak adlandırılır. Yolu nedir anlatmak için CSSRule İlerlediğiniz gereğidir selectorTextözelliği. Çalışma kodu şuna benzer:

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.

Bunun sizin için nasıl çalıştığını bana bildirin ve herhangi bir hata görürseniz lütfen yorum yapın.

— Mike
kaynak
1
100'lerden fazla öğeniz varsa CSS'yi bu şekilde değiştirmek çok daha hızlıdır. Örneğin, bir tablonun belirli bir bölümündeki tüm hücreleri aynı anda değiştirmek diyelim.
— EdH
5
rule.valueFF 20'de bulamıyorum . rule.styleAncak, ayarlanabilir ve gibi davranan vardır element.style. Cf. https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule . Erişmeden rule.type == rule.STYLE_RULEönce kontrol etmek de iyi bir fikir olabilir rule.selectorText.
— Christian Aichinger
1
MUHTEŞEM OLDU! Görüntü geçişleri üzerinde çalışıyordum ve büyük bir görüntüyü dilimleme için 36 ayrı URI'ye yerleştirmeye başladığınızda CSS gerçekten yavaşlıyor. Bu sadece senaryomdan bir ton ek yük aldı. Teşekkürler!
— Jason Maggard
1
— the_web
document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};benim için çalıştı, teşekkürler!
— Pavel
43

Lütfen! Sadece w3'e ( http://www.quirksmode.org/dom/w3c_css.html ) sorun! Ya da aslında beş saatimi aldı ... ama işte burada!

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

Fonksiyonun kullanımı gerçekten çok kolay .. örnek:

<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 ..

DÜZENLEME: @ user21820 yanıtında açıklandığı gibi, sayfadaki tüm stil sayfalarını değiştirmek biraz gereksiz olabilir. Aşağıdaki komut dosyası, en son Google Chrome ile birlikte IE5.5 ile çalışır ve yalnızca yukarıda açıklanan css () işlevini ekler.

(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
kaynak
Cidden kolay uygulama. Teşekkürler
— Kaleb Anderson
1
Cevabımdaki gibi yeni oluşturulmuş tek bir stil sayfasının aksine her bir stil sayfasını değiştirmenin bir nedeni var mı?
— user21820
Çok güzel bir uygulama. Şerefe efendim.
— Jason Maggard
1
@ user21820, muhtemelen değil. Sanırım gerçekten güvenli tarafta olmak istedim .. Cevap nihayet güncellendi, size tebrikler :)
— Leonard Pauli
10

Kodu cevaplarda toplayarak, FF 25'imde iyi çalışıyor gibi görünen bu işlevi yazdım.

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
}

Bu, tarayıcı tarafından anlaşılmasa bile JS'de kullanılacak değerleri css'e koymanın bir yoludur. örneğin, kaydırılmış tablodaki bir tbody için maxHeight.

Aramak :

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

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

— FrViPofm
kaynak
1
Stil HTML sayfasına katıştırılmışsa, document.styleSheets[m].hrefboş olacaktır ve başarısız olacaktır.
— JCM
4

Diğer çözümlerin neden belge için tüm stil sayfaları listesinden geçtiğini bilmiyorum. Bunu yapmak, her stil sayfasında verimsiz olan yeni bir giriş oluşturur. Bunun yerine, yeni bir stil sayfası ekleyebilir ve istediğimiz CSS kurallarımızı buraya ekleyebiliriz.

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

Bu özellik için daha özel "! Önemli" stil bildirimleri yoksa, özelliğin değerine "!

— kullanıcı21820
kaynak
1
Bkz developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/... daha karmaşık bir sürümü için.
— user21820
1
Çok doğru. .İnsertRule başarısız olursa (IE9 öncesi destek için) .addRule (seçici, özellik + ':' + değer) kullandığınızdan emin olun.
— Leonard Pauli
3

Yorum yapacak kadar temsilcim yok, bu yüzden bir cevabı biçimlendireceğim, ancak bu sadece söz konusu sorunun bir göstergesidir.

Öyle görünüyor ki, öğe stilleri stil sayfalarında tanımlandığında getElementById ("someElement") stili için görünmezler.

Bu kod sorunu göstermektedir ... jsFiddle'daki aşağıdan kod .

Test 2'de, ilk çağrıda, kalan öğeler tanımsızdır ve bu nedenle, basit bir geçiş olması gereken şey karışır. Kullanımım için önemli stil değerlerimi satır içinde tanımlayacağım, ancak stil sayfasının amacını kısmen bozuyor gibi görünüyor.

İşte sayfa kodu ...

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

Umarım bu, sorunu aydınlatmaya yardımcı olur.

Atla

— BentFX
kaynak
2

Herhangi bir elemanın "hesaplanmış" stillerini alabilirsiniz.

IE, "currentStyle" adlı bir şey kullanıyor, Firefox (ve diğer "standart uyumlu" tarayıcıların "defaultView.getComputedStyle" kullandığını varsayıyorum).

Bunu yapmak için çapraz tarayıcı işlevi yazmanız veya prototip veya jQuery gibi iyi bir Javascript çerçevesi kullanmanız gerekir (prototip javascript dosyasında "getStyle" ve jquery javascript dosyasında "curCss" arayın).

Bununla birlikte, yüksekliğe veya genişliğe ihtiyacınız varsa muhtemelen element.offsetHeight ve element.offsetWidth kullanmanız gerekir.

Döndürülen değer Null'dur, dolayısıyla bir mantık yapmak için bir şeyin genişliğini bilmesi gereken bir Javascript'im varsa (genişliği belirli bir değere değil,% 1 artırıyorum)

Unutmayın, söz konusu öğeye bir satır içi stil eklerseniz, "varsayılan" değer olarak hareket edebilir ve öğenin satır içi stil özelliği olduğundan, sayfa yüklemesinde Javascript tarafından okunabilir olacaktır:

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

Bu 32 satırlık basit özet , belirli bir stil sayfasını tanımlamanıza ve stillerini çok kolay bir şekilde değiştirmenize olanak tanır:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
— Solendil
kaynak
0

Bunun pratik kullanımını hiç görmedim, ancak muhtemelen DOM stil sayfalarını düşünmelisiniz . Bununla birlikte, dürüst olmak gerekirse, bunun abartılı olduğunu düşünüyorum.

Bir elemanın genişliğini ve yüksekliğini öğrenmek istiyorsanız, boyutların nereden uygulandığına bakılmaksızın, sadece element.offsetWidthve kullanın element.offsetHeight.

— Rakesh Pai
kaynak
Benim kullanımım: <style> #tid {genişlik:% 10; } </style> <div id = 'tid' onclick = "artış ('tid')"> </div> artış, genişliğin <% 100 olup olmadığını kontrol edecek, öyleyse% 1 artacaktır. document.getElementById.style.width, satır içi değer olmadığı için boş döndürür. DOM Stil Sayfalarından daha basit bir yol var mı?
— Coltin
0

Belki şunu deneyin:

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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.