Setel properti CSS di Javascript?

162

Saya telah membuat yang berikut ...

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

Bagaimana saya sekarang mengatur atribut CSS misalnya width: 100px?

javascript css

— Skizit
sumber

253

Gunakan element.style:

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

— KJYe.Name 葉家仁
sumber

14

Bagaimana dengan yang tidak resmi -webkit-background-size? Apakah ada cara untuk mengatur ini dengan js polos atau kita harus menggunakan jQuery?

— Luke

60

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

— Daniel X Moore

Ini sebenarnya gaya elemen dalam elemen dan bukan di stylesheet.

— Aft3rL1f3

56

Cukup atur style:

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

Atau jika Anda suka, Anda dapat menggunakan jQuery :

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

— djdd87
sumber

5

@Sime - Kutipan saya tidak konsisten. Saya selalu menggunakan tanda kutip ganda untuk JS karena itulah standar di tempat kerja. Bagaimanapun, baris pertama memiliki tanda kutip tunggal ketika saya menyalinnya dari pertanyaan OPs. Sudah diperbaiki sekarang.

— djdd87

1

Yah, mereka baik-baik saja sekarang, tetapi mereka tidak konsisten pada saat komentar saya:)

— Šime Vidas

2

@Sime - Saya melakukan acknoledge bahwa: "Ngomong-ngomong, baris pertama memiliki tanda kutip tunggal ketika saya menyalinnya dari pertanyaan

— djdd87

35

Untuk sebagian besar gaya, lakukan ini:

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

Untuk gaya yang memiliki tanda hubung dalam nama, lakukan ini sebagai gantinya:

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

— Daniel X Moore
sumber

17

Itu sebenarnya cukup sederhana dengan vanilla JavaScript:

menu.style.width = "100px";

— Justin Niessner
sumber

14

Semua jawaban memberi tahu Anda dengan benar bagaimana melakukan apa yang Anda minta, tetapi saya sarankan menggunakan JavaScript untuk mengatur kelas pada elemen dan menatanya dengan menggunakan CSS. Dengan begitu Anda menjaga pemisahan yang benar antara perilaku dan gaya.

Bayangkan jika Anda memiliki desainer untuk mendesain ulang situs ... mereka harus dapat bekerja murni dalam CSS tanpa harus bekerja dengan JavaScript Anda.

Dalam prototipe yang akan saya lakukan:

$(newElement).addClassName('blah')

— Nick
sumber

1

+1 dari saya - lebih mudah / bersih untuk memisahkan semua CSS Anda.

— Ian Oxley

1

jQuery versi ini untuk referensi ...$(selector).addClass('blah')

— zgr024

8

Hanya untuk orang yang ingin melakukan hal yang sama pada tahun 2018

Anda dapat menetapkan properti khusus CSS ke elemen Anda (melalui CSS atau JS) dan mengubahnya:

Penugasan melalui CSS:

element {
  --element-width: 300px;

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

Penugasan melalui JS

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

Dapatkan nilai properti melalui JS

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

Tautan di sini bermanfaat:

— Mattia Astorino
sumber

6

Saat debugging, saya ingin dapat menambahkan banyak atribut css dalam satu baris:

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

Membiasakan diri dengan gaya ini Anda dapat menambahkan banyak css dalam satu baris seperti:

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

— ramah
sumber

5

jika Anda ingin menambahkan properti global, Anda dapat menggunakan:

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

— Hetdev
sumber

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

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

1

Ini berfungsi baik dengan sebagian besar properti CSS jika tidak ada tanda hubung di dalamnya.

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

Untuk properti dengan tanda hubung di dalamnya seperti max-width, Anda harus mengonversikan sausage-casekecamelCase

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

— Daut
sumber

0

Penting untuk dipahami bahwa kode di bawah ini tidak mengubah stylesheet, tetapi sebaliknya mengubah DOM:

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

DOM menyimpan nilai yang dihitung dari properti elemen stylesheet, dan ketika Anda secara dinamis mengubah gaya elemen menggunakan Javascript Anda mengubah DOM. Ini penting untuk dicatat, dan dipahami karena cara Anda menulis kode dapat memengaruhi dinamika Anda. Jika Anda mencoba untuk mendapatkan nilai yang tidak ditulis langsung ke dalam elemen itu sendiri, seperti ...

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

... Anda akan mengembalikan nilai yang tidak ditentukan yang akan disimpan dalam variabel 'propertyValue' contoh kode. Jika Anda bekerja dengan mendapatkan dan menetapkan properti yang ditulis di dalam style-sheet CSS dan Anda menginginkan FUNGSI TUNGGAL yang didapat, serta menetapkan nilai-properti-nilai-nilai dalam situasi ini, yang merupakan situasi yang sangat umum terjadi, maka Anda harus menggunakan JQuery.

$(selector).css(property,value)

Satu-satunya downside adalah Anda harus tahu JQuery, tapi ini jujur salah satu dari banyak alasan bagus bahwa setiap Pengembang Javascript harus belajar JQuery. Jika Anda ingin mendapatkan properti CSS yang dihitung dari style-sheet dalam JavaScript murni maka Anda perlu menggunakannya.

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

Kelemahan dari metode ini adalah metode getComputedValue hanya didapat, tidak disetel. Mozilla's Take on Computed Values Tautan ini lebih mendalam tentang apa yang saya bahas di sini. Semoga Ini Membantu Seseorang !!!

— Aft3rL1f3
sumber

Saya pikir blok kode pertama Anda tidak ada konten?

— zb226

1

Di sana diperbaiki

— Aft3rL1f3