253

Làm thế nào để tôi thêm một lớp cho div?

var new_row = document.createElement('div');

javascript dom

— ồ
nguồn

6

Quá tệ, thông số kỹ thuật không cho phép các lớp được chỉ định làm tham số để tạoEuity.

— Gaʀʀʏ

Nếu bạn muốn thêm một lớp mà không loại bỏ các lớp khác , hãy xem câu trả lời này .

— Michał Perłakowski

447

new_row.className = "aClassName";

Dưới đây là thông tin thêm về MDN: className

— Darko Z
nguồn

5

Điều gì về việc thiết lập nhiều tên lớp?

— Simon

5

@Sponge new_row.className = "aClassName1 aClassName2";nó chỉ là một thuộc tính, bạn có thể gán bất kỳ chuỗi nào bạn thích, ngay cả khi nó làm cho html không hợp lệ

— Darko Z

16

Tôi cũng muốn giới thiệu new_row.classList.add('aClassName');vì sau đó bạn có thể thêm nhiều tên lớp

— StevenTsooo

@StevenTsooo Lưu ý rằng khôngclassList được hỗ trợ trong IE9 trở xuống.

— dayuloli

Có cách nào để tạo một phần tử với tên lớp trong một dòng mã - và vẫn nhận được tham chiếu đến phần tử không? ví dụ: myEL = document.createEuity ('div'). addClass ('yo') 'sẽ không hoạt động.

— Kokodoko

36

Sử dụng .classList.add()phương pháp:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

<div class="foo"></div>

Mở rộng đoạn trích

Phương thức này tốt hơn ghi đè lên thuộc classNametính, vì nó không xóa các lớp khác và không thêm lớp nếu phần tử đã có nó.

Bạn cũng có thể chuyển đổi hoặc xóa các lớp bằng cách sử dụng element.classList(xem tài liệu MDN ).

— Michał Perłakowski
nguồn

28

Đây là mã nguồn làm việc bằng cách sử dụng một cách tiếp cận chức năng.

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (function(){
                var countup = this;
                var newNode = document.createElement('div');
                newNode.className = 'textNode news content';
                newNode.innerHTML = 'this created div contains a class while created!!!';
                document.getElementById('dd').appendChild(newNode);
            })();
        </script>
    </body>
</html>

— Nắng SM
nguồn

8

Vì thế? Nó là một ví dụ, không có gì sai với điều đó.

— Carey

Re "while created" : Ý bạn là "trong khi được tạo" ? Trả lời bằng cách chỉnh sửa câu trả lời của bạn , không phải ở đây trong ý kiến. Cảm ơn trước.

— Peter Mortensen

Một lời giải thích sẽ theo thứ tự. Ví dụ, "cách tiếp cận chức năng" nghĩa là gì? Bạn có thể giải thích (bằng cách chỉnh sửa câu trả lời của bạn , không phải ở đây trong các bình luận)? Cảm ơn trước.

— Peter Mortensen

15

Ngoài ra còn có cách DOM để thực hiện điều này trong JavaScript:

// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName");
// Add some text
new_row.appendChild(document.createTextNode("Some text"));
// Add it to the document body
document.body.appendChild(new_row);

— Hasse Bjork
nguồn

2

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

— Diego Slinger
nguồn

2

Xem xét giải thích lý do tại sao bạn đăng bài này, nó sẽ giúp người khác học hỏi.

— Thomas Smyth

đã bỏ phiếu vì đây là JavaScript / vanilla JavaScript nguyên gốc và không cần bất kỳ thư viện hoặc khung công tác nào khác.

— obotezat

Một lời giải thích sẽ theo thứ tự.

— Peter Mortensen

1

var new_row = document.createElement('div');

new_row.setAttribute("class", "YOUR_CLASS");

Điều này sẽ làm việc ;-)

nguồn

— Chương trình Pedro
nguồn

Đây không phải là một giải pháp tốt vì phương pháp này không hoạt động trên tất cả các trình duyệt. setAttribution chỉ được hỗ trợ bởi 60% trình duyệt đang sử dụng. caniuse.com/#search=setAttribution

— Ragas

0

Cũng đáng để xem qua:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

— Yoni
nguồn

Một lời giải thích sẽ theo thứ tự.

— Peter Mortensen

0

Nếu bạn muốn tạo một trường đầu vào mới với fileloại ví dụ :

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

Đầu ra sẽ là: <input type="file" class="w-95 mb-1">

Nếu bạn muốn tạo thẻ lồng nhau bằng JavaScript, cách đơn giản nhất là innerHtml:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

Đầu ra sẽ là:

<li>
    <span class="toggle">Jan</span>
</li>

— Mile Mijatović
nguồn

0

Giải pháp đa trình duyệt

Lưu ý: classListThuộc tính không được hỗ trợ trong Internet Explorer 9 . Đoạn mã sau sẽ hoạt động trong tất cả các trình duyệt:

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

Nguồn: làm thế nào để js thêm lớp

— Ravi Makwana
nguồn

-3

Điều này cũng sẽ làm việc.

$(document.createElement('div')).addClass("form-group")

— Muhammad Awais
nguồn

5

Chỉ khi bạn đang sử dụng jQuery.

— Dân Nguyễn

1

Cảm ơn bạn đã đăng bài, điều này làm việc cho tôi, tôi cần một giải pháp jquery.

— midknyte

Làm cách nào tôi có thể thêm một lớp vào một phần tử DOM trong JavaScript?

Giải pháp đa trình duyệt