Thêm và xóa thuộc tính style khỏi div bằng jquery

103

Tôi đã kế thừa một dự án mà tôi đang làm và tôi đang cập nhật một số hoạt ảnh jquery (rất ít thực hành với jquery).

Tôi có một div mà tôi cần thêm và xóa thuộc tính style khỏi đó. Đây là div:

<div id='voltaic_holder'>

Tại một thời điểm trong hoạt ảnh, tôi cần thêm một kiểu cho nó:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

Tôi đã tìm kiếm xung quanh và tìm thấy .removeAttr()phương pháp nhưng tôi không thể biết cách thêm nó, hoặc thậm chí các phần từ xa của nó (như chỉ trên cùng: -75px).

Cảm ơn,

jquery css dhtml

— Công bố của nó
nguồn

$('voltaic_holder').style = nullcó lẽ? Phong cách có toàn bộ cây đối tượng của riêng họ. hầu hết các thuộc tính khác chỉ là dữ liệu kiểu key = value.

— Marc B

246

Bạn có thể làm bất kỳ điều nào sau đây

Đặt từng thuộc tính style riêng lẻ:

$("#voltaic_holder").css("position", "relative");

Đặt nhiều thuộc tính kiểu cùng một lúc:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Xóa một kiểu cụ thể:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Xóa toàn bộ thuộc tính kiểu:

$("#voltaic_holder").removeAttr("style")

— Adam Albrecht
nguồn

Tôi có thể thêm nhiều hơn 1 thuộc tính css trên mỗi dòng không? Hay tôi phải làm một cái cho mỗi thuộc tính kiểu như vậy: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");

— ItsProtified

3

Để trả lời điều đó, bạn có thể. Chỉ cần sử dụng một đối tượng theo nghĩa đen trên hàm .css (). Như $ ('foo'). Css ({'height': '30px', 'width': '50px'});

— Richard Neil Ilagan

@AdamAlbrecht Làm cách nào để xóa kiểu cụ thể mà tôi đã thêm vì trong $ ("# voltaic_holder"). RemoveAttr ("style"), nó sẽ xóa tất cả kiểu được áp dụng theo mặc định với mới được thêm vào.

— 3 quy tắc

21

Để loại bỏ hoàn toàn thuộc tính style của voltaic_holderspan, hãy làm như sau:

$("#voltaic_holder").removeAttr("style");

Để thêm một thuộc tính, hãy làm như sau:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

Để chỉ xóa kiểu trên cùng, hãy làm như sau:

$("#voltaic_holder").css("top", "");

— Peter Olson
nguồn

15

Nếu bạn đang sử dụng jQuery, hãy sử dụng css để thêm CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

Để xóa các thuộc tính CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});

— justkt
nguồn

Bạn không thể xóa vị trí hoặc thuộc tính hàng đầu khỏi phần tử voltaic_holder vì nó không có thuộc tính thos. Đó là các thuộc tính css được xác định trong thuộc tính style.

— Peter Olson

@Peter - doh! Đã chỉnh sửa để sử dụng.css

— justkt

10

Cách dễ dàng để xử lý điều này (và giải pháp HTML tốt nhất để khởi động) là thiết lập các lớp có kiểu bạn muốn sử dụng. Sau đó, nó là một vấn đề đơn giản của việc sử dụng addClass () và removeClass () , hoặc thậm chí toggleClass () .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

hoặc thậm chí

$('#voltaic_holder').toggleClass('shiny dull');

— Những giấc mơ siêu thực
nguồn

2

Anwer ở đây Cách thêm động một kiểu cho căn chỉnh văn bản bằng jQuery

— Con ngựa
nguồn

2

Trong trường hợp phương thức .css trong jQuery cho ! Quy tắc quan trọng sẽ không áp dụng.

Trong trường hợp này chúng ta nên sử dụng hàm .attr .

Ví dụ: Nếu bạn muốn thêm kiểu như bên dưới:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

Bạn nên sử dụng:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Hy vọng nó sẽ giúp một số người.

— Adiyya Tadikamalla
nguồn

1

Xóa thuộc tính style khỏi div bằng truy vấn J:

$("#TableDiv").removeAttr("style");

Thêm kiểu vào div bằng truy vấn J:

$("#TableDiv").attr("style", "display: none;");

Thêm kiểu bằng html:

<div class="row" id="TableDiv" style="display: none;">
</div>

Hy vọng nó sẽ hữu ích :)

— Wajid khan
nguồn