Làm cách nào để thêm `style = display: 'chặn khối' vào một phần tử bằng jQuery?


Câu trả lời:


345
$("#YourElementID").css("display","block");

Chỉnh sửa: hoặc như dave thieben chỉ ra trong bình luận của mình bên dưới, bạn cũng có thể làm điều này:

$("#YourElementID").css({ display: "block" });

20
hoặc.css({ display: "block" });
dave thieben

8
@dave - hoặc .css({ "display": "block" });chỉ để đoản mạch bất kỳ vấn đề nào gây ra bởi một displaybiến. - JSLint sẽ từ chối phiên bản mà không có dấu ngoặc kép. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai

Nhiệm vụ Json-esque là hữu ích để gửi nó xuống các đường ống. Tôi thích điều này.
Luis Robles

35

Tùy thuộc vào mục đích thiết lập thuộc tính hiển thị, bạn có thể muốn xem qua

$("#yourElementID").show()

$("#yourElementID").hide()

27

Có nhiều chức năng để thực hiện công việc này được viết ở dưới dựa trên mức độ ưu tiên.

Đặt một hoặc nhiều thuộc tính CSS cho tập hợp các phần tử phù hợp.

$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})

Hiển thị các yếu tố phù hợp và gần tương đương với cuộc gọi.css("display", "block")

Bạn có thể hiển thị phần tử bằng cách sử dụng .show()thay thế

$("div").show()

Đặt một hoặc nhiều thuộc tính cho tập hợp các yếu tố phù hợp.

Nếu phần tử đích không có stylethuộc tính , bạn có thể sử dụng phương thức này để thêm kiểu nội tuyến vào phần tử.

$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

  • JavaScript

Bạn có thể thêm thuộc tính CSS cụ thể vào thành phần bằng cách sử dụng javascript thuần túy , nếu bạn không muốn sử dụng jQuery.

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");

11

Nếu bạn cần thêm nhiều thì bạn có thể làm như thế này:

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

Như một thực tiễn tốt, tôi cũng sẽ đặt tên thuộc tính giữa các dấu ngoặc kép để cho phép dấu gạch ngang vì hầu hết các kiểu có dấu gạch ngang trong đó. Nếu đó là 'hiển thị', thì dấu ngoặc kép là tùy chọn nhưng nếu bạn có dấu gạch ngang, nó sẽ không hoạt động nếu không có dấu ngoặc kép. Dù sao, để làm cho nó đơn giản: luôn luôn đặt chúng trong dấu ngoặc kép.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.