cách xóa mọi kiểu khỏi phần tử?

Question

Bằng cách 'xóa', tôi có nghĩa là đặt lại tất cả kiểu có thể rơi xuống trên phần tử đó và đặt nó vào mặc định của trình duyệt.

Tôi cần điều này để gỡ lỗi, tôi không biết quy tắc nào gây hại và cách tiếp cận tốt nhất là xóa tất cả các kiểu và sau đó tháo từng giới hạn để kiểm tra khi mọi thứ bắt đầu sai.

Bạn đã thấy bất kỳ đoạn trên web mà sẽ bao gồm:

{ right: auto !important; left: auto !important; visibility: visible !important;... 

và như vậy thông qua mỗi phong cách có thể.

Answer 1

Bạn không thể. Có giá trị initial được đề xuất trong bản nháp CSS3, nhưng ngay cả khi được xác định, nó sẽ đặt thuộc tính cho các giá trị ban đầu được xác định trong thông số CSS, không được xác định bởi mặc định của trình duyệt. Ví dụ: giá trị ban đầu của thuộc tính display là inline, nhưng chắc chắn các trình duyệt không hiển thị mọi thứ dưới dạng phần tử nội tuyến theo mặc định.

Một cách tiếp cận tốt hơn cho vấn đề ban đầu của bạn là sử dụng các công cụ gỡ rối và kiểm tra như Firebug hoặc Tiện ích mở rộng dành cho nhà phát triển web cho Firefox. Chúng cho phép bạn xem kiểu nào áp dụng cho một phần tử và chúng đến từ đâu.

Answer 2

Sử dụng tờ kiểu đặt lại tải trước tất cả các tờ kiểu khác của bạn.

Tôi sử dụng phiên bản đã sửa đổi của http://meyerweb.com/eric/tools/css/reset/

Answer 3

Nếu bạn đang sử dụng Chrome/Safari, initial chỉ hoạt động tốt với những gì bạn muốn làm. Sau khi cài đặt, bạn sẽ thấy kiểu hoạt động là initial và kiểu được tính làm mặc định của trình duyệt.

Nhưng để đặt kiểu hiện hoạt thành mặc định, hãy tạo thành phần tạm thời và đặt thuộc tính phần tử của bạn thành giá trị tạm thời.

Demo: http://jsfiddle.net/ThinkingStiff/Yb9J9/

Script:

Element.prototype.setDefaultStyles = function() { 
    var element = document.createElement(this.tagName), 
     styles = window.getComputedStyle(element), 
     display = styles.getPropertyValue('display'); 
    element.style.display = 'none'; 
    document.body.appendChild(element); 

    for(style in styles) { 
     this.style[styles[style]] = styles.getPropertyValue(styles[style]); 
    }; 

    this.style.display = display; 
    document.body.removeChild(element); 
}; 

document.getElementById('unstyled').setDefaultStyles(); 

HTML:

<div id="styled">styled</div> 
<div id="unstyled">unstyled</div> 

CSS:

#styled, #unstyled { 
    border: 1px solid red; 
    color: green; 
    width: 100px; 
    height: 50px; 
} 

Output:

Answer 4

dùng thử. tạo ra một lớp tên là một cái gì đó như thế này và sau đó sử dụng nó

.reset-this { 
    animation : none; 
    animation-delay : 0; 
    animation-direction : normal; 
    animation-duration : 0; 
    animation-fill-mode : none; 
    animation-iteration-count : 1; 
    animation-name : none; 
    animation-play-state : running; 
    animation-timing-function : ease; 
    backface-visibility : visible; 
    background : 0; 
    background-attachment : scroll; 
    background-clip : border-box; 
    background-color : transparent; 
    background-image : none; 
    background-origin : padding-box; 
    background-position : 0 0; 
    background-position-x : 0; 
    background-position-y : 0; 
    background-repeat : repeat; 
    background-size : auto auto; 
    border : 0; 
    border-style : none; 
    border-width : medium; 
    border-color : inherit; 
    border-bottom : 0; 
    border-bottom-color : inherit; 
    border-bottom-left-radius : 0; 
    border-bottom-right-radius : 0; 
    border-bottom-style : none; 
    border-bottom-width : medium; 
    border-collapse : separate; 
    border-image : none; 
    border-left : 0; 
    border-left-color : inherit; 
    border-left-style : none; 
    border-left-width : medium; 
    border-radius : 0; 
    border-right : 0; 
    border-right-color : inherit; 
    border-right-style : none; 
    border-right-width : medium; 
    border-spacing : 0; 
    border-top : 0; 
    border-top-color : inherit; 
    border-top-left-radius : 0; 
    border-top-right-radius : 0; 
    border-top-style : none; 
    border-top-width : medium; 
    bottom : auto; 
    box-shadow : none; 
    box-sizing : content-box; 
    caption-side : top; 
    clear : none; 
    clip : auto; 
    color : inherit; 
    columns : auto; 
    column-count : auto; 
    column-fill : balance; 
    column-gap : normal; 
    column-rule : medium none currentColor; 
    column-rule-color : currentColor; 
    column-rule-style : none; 
    column-rule-width : none; 
    column-span : 1; 
    column-width : auto; 
    content : normal; 
    counter-increment : none; 
    counter-reset : none; 
    cursor : auto; 
    direction : ltr; 
    display : inline; 
    empty-cells : show; 
    float : none; 
    font : normal; 
    font-family : inherit; 
    font-size : medium; 
    font-style : normal; 
    font-variant : normal; 
    font-weight : normal; 
    height : auto; 
    hyphens : none; 
    left : auto; 
    letter-spacing : normal; 
    line-height : normal; 
    list-style : none; 
    list-style-image : none; 
    list-style-position : outside; 
    list-style-type : disc; 
    margin : 0; 
    margin-bottom : 0; 
    margin-left : 0; 
    margin-right : 0; 
    margin-top : 0; 
    max-height : none; 
    max-width : none; 
    min-height : 0; 
    min-width : 0; 
    opacity : 1; 
    orphans : 0; 
    outline : 0; 
    outline-color : invert; 
    outline-style : none; 
    outline-width : medium; 
    overflow : visible; 
    overflow-x : visible; 
    overflow-y : visible; 
    padding : 0; 
    padding-bottom : 0; 
    padding-left : 0; 
    padding-right : 0; 
    padding-top : 0; 
    page-break-after : auto; 
    page-break-before : auto; 
    page-break-inside : auto; 
    perspective : none; 
    perspective-origin : 50% 50%; 
    position : static; 
    /* May need to alter quotes for different locales (e.g fr) */ 
    quotes : '\201C' '\201D' '\2018' '\2019'; 
    right : auto; 
    tab-size : 8; 
    table-layout : auto; 
    text-align : inherit; 
    text-align-last : auto; 
    text-decoration : none; 
    text-decoration-color : inherit; 
    text-decoration-line : none; 
    text-decoration-style : solid; 
    text-indent : 0; 
    text-shadow : none; 
    text-transform : none; 
    top : auto; 
    transform : none; 
    transform-style : flat; 
    transition : none; 
    transition-delay : 0s; 
    transition-duration : 0s; 
    transition-property : none; 
    transition-timing-function : ease; 
    unicode-bidi : normal; 
    vertical-align : baseline; 
    visibility : visible; 
    white-space : normal; 
    widows : 0; 
    width : auto; 
    word-spacing : normal; 
    z-index : auto; 
    /* basic modern patch */ 
    all: initial; 
    all: unset; 
} 

Nguyên từ đây: Reset/remove CSS styles for element only