Làm thế nào để loại bỏ thuộc tính css bằng javascript?

có thể xóa thuộc tính CSS của một phần tử bằng JavaScript không? ví dụ: tôi có div.style.zoom = 1.2, bây giờ tôi muốn xóa thuộc tính thu phóng thông qua JavaScript?

Bạn có hai lựa chọn:

LỰA CHỌN 1:

Bạn có thể sử dụng phương thức removeProperty . Nó sẽ loại bỏ một phong cách từ một yếu tố.

el.style.removeProperty('zoom');

LỰA CHỌN 2:

Bạn có thể đặt nó thành giá trị mặc định:

el.style.zoom = "";

Thu phóng hiệu quả bây giờ sẽ là bất cứ điều gì theo sau các định nghĩa được đặt trong biểu định kiểu (thông qua các thẻ liên kết và kiểu). Vì vậy, cú pháp này sẽ chỉ sửa đổi kiểu cục bộ của phần tử này.

removeProperty sẽ xóa một kiểu từ một phần tử.

Thí dụ:

div.style.removeProperty ('phóng to');

Trang tài liệu MDN:
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

Bạn có thể sử dụng đối tượng styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Hãy cẩn thận # 1: Bạn phải biết chỉ mục của biểu định kiểu của bạn và chỉ mục của quy tắc của bạn.

Hãy cẩn thận # 2: Đối tượng này được các trình duyệt triển khai không nhất quán; những gì hoạt động trong một có thể không hoạt động trong những người khác.

element.style.height = null;

đầu ra:

<div style="height:100px;"> 
// results: 
<div style="">

Bạn có thể thử tìm tất cả các thành phần có lớp này và đặt thuộc tính "thu phóng" thành "không có gì".

Nếu bạn đang sử dụng thư viện javascript của jQuery, bạn có thể làm điều đó với $(".the_required_class").css("zoom","")

Chỉnh sửa: Đã xóa tuyên bố này vì nó không đúng, như đã chỉ ra trong một bình luận và các câu trả lời khác thực sự có thể kể từ năm 2010.

Sai: không có cách nào thường được biết để sửa đổi biểu định kiểu từ JavaScript.

Bạn cũng có thể làm điều này trong jQuery bằng cách nói $(selector).css("zoom", "")

Điều này sẽ thực hiện mẹo - đặt kiểu nội tuyến thành bình thường để thu phóng:

$ ('div'). attr ("style", "zoom: normal;");

thực tế, nếu bạn đã biết tài sản, điều này sẽ làm điều đó ...

ví dụ:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    } 

Lưu ý rằng điều này chỉ hoạt động cho các kiểu nội tuyến ... không phải các kiểu bạn đã chỉ định thông qua một lớp hoặc một cái gì đó tương tự ...

Lưu ý khác: bạn có thể phải thoát một số ký tự trong câu lệnh thay thế đó, nhưng bạn có ý tưởng.

Để thay đổi tất cả các lớp cho một phần tử:

document.getElementById("ElementID").className = "CssClass";

Để thêm một lớp bổ sung cho một phần tử:

document.getElementById("ElementID").className += " CssClass";

Để kiểm tra xem một lớp đã được áp dụng cho một phần tử chưa:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )