Javascript CSS özelliği ayarlamak?

162

Aşağıdakileri yarattım ...

var menu = document.createElement('select');

Şimdi CSS özelliklerini nasıl ayarlayabilirim width: 100px?

javascript css

— Skizit
kaynak

253

Kullanım element.style:

var element = document.createElement('select');
element.style.width = "100px";

— KJYe.Ad 葉家仁
kaynak

14

Peki ya gayri resmi olanlar için -webkit-background-size? Bunları düz js ile ayarlamanın bir yolu var mı yoksa jQuery kullanmak zorunda mıyız?

— Luke

60

@Luke obj.style ["- webkit-background-size"] = "400 piksel"

— Daniel X Moore

Bu aslında öğeyi stil sayfasında değil öğedeki stil yapar.

— Aft3rL1f3

56

Sadece şunu ayarlayın style:

var menu = document.createElement("select");
menu.style.width = "100px";

Veya isterseniz jQuery kullanabilirsiniz :

$(menu).css("width", "100px");

— djdd87
kaynak

5

@Sime - Tırnaklarım tutarsız değil. İş için standart olduğu için JS için her zaman çift tırnak kullanırım. Her neyse, OPs sorusundan kopyalarken ilk satırın tek tırnak işaretleri vardı. Yine de düzeltildi.

— djdd87

1

Şimdi iyiler, ama benim :)

— yorumumda

2

@Sime - Ben şunu kabul ettim: "Her neyse,

— djdd87

35

Çoğu stil için bunu yapın:

var obj = document.createElement('select');
obj.style.width= "100px";

Adında kısa çizgiler bulunan stiller için bunu yapın:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

— Daniel X Moore
kaynak

17

Vanilya JavaScript ile aslında oldukça basit:

menu.style.width = "100px";

— Justin Niessner
kaynak

14

Tüm cevaplar size ne istediğini doğru bir şekilde söyler, ancak öğeye bir sınıf ayarlamak ve CSS kullanarak stil vermek için JavaScript kullanmanızı öneririm. Bu şekilde davranış ve stil arasındaki doğru ayrılığı korursunuz.

Siteyi yeniden şekillendirmek için bir tasarımcınız varsa düşünün ... JavaScript ile çalışmak zorunda kalmadan tamamen CSS'de çalışabilmelidirler.

Prototipte yapardım:

$(newElement).addClassName('blah')

— Nick
kaynak

1

Benden + 1'leyin - tüm CSS'lerinizi ayrı tutmak çok daha kolay / temiz.

— Ian Oxley

1

Referans için bunun jQuery sürümü ...$(selector).addClass('blah')

— zgr024

8

Sadece 2018'de aynı şeyi yapmak isteyen insanlar için

Öğenize (CSS veya JS aracılığıyla) bir CSS özel özelliği atayabilir ve değiştirebilirsiniz:

CSS aracılığıyla değerlendirme:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

JS ile Ödev

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

JS ile mülk değerini alma

ELEMENT.style.getPropertyValue('--element-width');

İşte faydalı bağlantılar:

— Mattia Astorino
kaynak

6

Hata ayıklama yaparken, ben bir satır css öznitelikleri bir grup eklemek mümkün gibi:

menu.style.cssText = 'width: 100px';

Bu stile alıştığınızda, bir satıra css gibi bir satır ekleyebilirsiniz:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

— afable
kaynak

5

global bir mülk eklemek istiyorsanız şunları kullanabilirsiniz:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— Hetdev
kaynak

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— Mohsin Han
kaynak

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— Mohsin Han
kaynak

1

İçinde tire yoksa, çoğu CSS özelliği ile iyi çalışır.

var element = document.createElement('select');
element.style.width = "100px";

İçinde tire bulunan özellikler max-widthiçin sausage-case,camelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

— Daut
kaynak

0

Aşağıdaki kodun stil sayfasını değiştirmediğini, bunun yerine DOM'yi değiştirdiğini anlamak önemlidir:

document.getElementById("p2").style.color = "blue";

DOM, stil sayfası öğesi özelliklerinin hesaplanan bir değerini depolar ve Javascript kullanarak bir öğe stilini dinamik olarak değiştirdiğinizde DOM'yi değiştirirsiniz. Bunu not etmek ve anlamak önemlidir, çünkü kodunuzu yazma şekliniz dinamiklerinizi etkileyebilir. Doğrudan öğenin kendisine yazılmayan değerleri elde etmeye çalışırsanız, böyle ...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... kod örneğinin 'propertyValue' değişkeninde saklanacak tanımsız bir değer döndürürsünüz. Bir CSS stil sayfasının içine yazılan özellikleri almak ve ayarlamak için çalışıyorsanız ve bu durumda çok yaygın bir durum olan stil özelliği değerlerini ayarlamanın yanı sıra bir TEK FONKSİYON istiyorsanız , o zaman JQuery kullanmak zorunda.

$(selector).css(property,value)

Tek dezavantajı JQuery bilmek lazım, ama bu dürüst olmak gerekirse her Javascript Geliştirici JQuery öğrenmek gerekir çok iyi nedenlerinden biridir. Saf JavaScript'te bir stil sayfasından hesaplanan bir CSS özelliği almak istiyorsanız, kullanmanız gerekir.

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

Bu yöntemin dezavantajı, getComputedValue yönteminin yalnızca alacağı, ayarlanmadığıdır. Mozilla'nın Hesaplanan Değerleri Alması Bu bağlantı, burada ele aldığım şeyler hakkında daha derinlemesine ilerliyor. Umarım Bu Birine Yardımcı Olur !!!

— Aft3rL1f3
kaynak

Bence ilk kod bloğunuzda içerik eksik mi?

— zb226

1

Orada sabit

— Aft3rL1f3