Đặt thuộc tính CSS trong Javascript?

160

Tôi đã tạo như sau ...

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

Bây giờ tôi sẽ đặt các thuộc tính CSS như width: 100pxthế nào?

javascript css

— Skizit
nguồn

251

Sử dụng element.style:

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

— KJYe. Tên
nguồn

14

Còn đối với những người không chính thức như thế -webkit-background-sizenào? Có cách nào để thiết lập những thứ này với js đơn giản hay chúng ta phải sử dụng jQuery?

— Lu-ca

60

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

— Daniel X Moore

Điều này thực sự định kiểu phần tử trong phần tử chứ không phải trong biểu định kiểu.

— Aft3rL1f3

56

Chỉ cần đặt style:

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

Hoặc nếu bạn thích, bạn có thể sử dụng jQuery :

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

— djdd87
nguồn

5

@Sime - Trích dẫn của tôi không nhất quán. Tôi luôn sử dụng dấu ngoặc kép cho JS vì đó là tiêu chuẩn trong công việc. Dù sao, dòng đầu tiên có dấu ngoặc đơn khi tôi sao chép nó từ câu hỏi OP. Bây giờ vẫn sửa.

— djdd87

1

Chà, giờ họ ổn rồi, nhưng họ không nhất quán tại thời điểm nhận xét của tôi:)

— Šime Vidas

2

@Sime - Tôi đã xác nhận rằng: "Dù sao, dòng đầu tiên có dấu ngoặc đơn khi tôi sao chép nó từ câu hỏi OP. Dù sao cũng đã sửa."

— djdd87

35

Đối với hầu hết các phong cách làm điều này:

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

Đối với các kiểu có dấu gạch ngang trong tên, hãy thực hiện việc này thay vào đó:

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

— Daniel X Moore
nguồn

17

Điều đó thực sự khá đơn giản với JavaScript vanilla:

menu.style.width = "100px";

— Justin Niessner
nguồn

14

Tất cả các câu trả lời cho bạn biết chính xác cách thực hiện những gì bạn đã hỏi nhưng tôi sẽ khuyên bạn nên sử dụng JavaScript để đặt một lớp trên thành phần và định kiểu nó bằng cách sử dụng CSS. Bằng cách đó, bạn đang giữ sự tách biệt chính xác giữa hành vi và phong cách.

Hãy tưởng tượng nếu bạn có một nhà thiết kế để tạo kiểu lại trang web ... họ sẽ có thể làm việc hoàn toàn bằng CSS mà không phải làm việc với JavaScript của bạn.

Trong nguyên mẫu tôi sẽ làm:

$(newElement).addClassName('blah')

— Nick
nguồn

1

+1 từ tôi - dễ dàng hơn / sạch hơn để tách tất cả CSS của bạn.

— Ian Oxley

1

Phiên bản jQuery này để tham khảo ...$(selector).addClass('blah')

— zgr024

8

Chỉ dành cho những người muốn làm điều tương tự vào năm 2018

Bạn có thể gán một thuộc tính tùy chỉnh CSS cho thành phần của bạn (thông qua CSS hoặc JS) và thay đổi nó:

Assigment thông qua CSS:

element {
  --element-width: 300px;

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

Chuyển nhượng thông qua JS

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

Nhận giá trị tài sản thông qua JS

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

Ở đây liên kết hữu ích:

— Mattia Astorino
nguồn

6

Khi gỡ lỗi, tôi muốn có thể thêm một loạt các thuộc tính css trong một dòng:

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

Làm quen với phong cách này, bạn có thể thêm một loạt css trong một dòng như vậy:

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

— một truyền thuyết
nguồn

5

nếu bạn muốn thêm một tài sản toàn cầu, bạn có thể sử dụng:

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

— Hetdev
nguồn

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
nguồn

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
nguồn

1

Điều này hoạt động tốt với hầu hết các thuộc tính CSS nếu không có dấu gạch nối trong chúng.

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

Đối với các thuộc tính có dấu gạch nối trong chúng như thế nào max-width, bạn nên chuyển đổi sausage-casethànhcamelCase

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

— Daut
nguồn

0

Điều quan trọng là phải hiểu rằng mã dưới đây không thay đổi biểu định kiểu mà thay vào đó thay đổi DOM:

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

DOM lưu trữ một giá trị được tính toán của các thuộc tính thành phần của biểu định kiểu và khi bạn tự động thay đổi kiểu phần tử bằng Javascript, bạn sẽ thay đổi DOM. Điều này rất quan trọng để lưu ý và hiểu bởi vì cách bạn viết mã có thể ảnh hưởng đến động lực học của bạn. Nếu bạn cố gắng thu được các giá trị không được ghi trực tiếp vào chính phần tử, như vậy ...

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

... bạn sẽ trả về một giá trị không xác định sẽ được lưu trữ trong biến 'propertyValue' của ví dụ mã. Nếu bạn đang làm việc với việc nhận và thiết lập các thuộc tính được viết bên trong biểu định kiểu CSS và bạn muốn có CHỨC NĂNG SINGLE , cũng như đặt các giá trị thuộc tính kiểu trong tình huống này, đây là tình huống rất phổ biến, sau đó bạn phải sử dụng JQuery.

$(selector).css(property,value)

Nhược điểm duy nhất là bạn phải biết JQuery, nhưng đây thực sự là một trong rất nhiều lý do tốt mà mọi Nhà phát triển Javascript nên học JQuery. Nếu bạn muốn có được một thuộc tính CSS được tính toán từ một biểu định kiểu trong JavaScript thuần thì bạn cần phải sử dụng.

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

Nhược điểm của phương thức này là phương thức getComputingValue chỉ nhận được, nó không được đặt. Các giá trị tính toán của Mozilla Liên kết này đi sâu hơn về những gì tôi đã giải quyết ở đây. Hy vọng điều này sẽ giúp được ai đó !!!

— Aft3rL1f3
nguồn

Tôi nghĩ rằng khối mã đầu tiên của bạn đang thiếu nội dung?

— zb226

1

Có bản sửa lỗi

— Aft3rL1f3