【问题标题】:how to remove every style from element?如何从元素中删除每种样式?
【发布时间】:2012-01-08 22:39:08
【问题描述】:

“删除”是指重置所有可能出现在此类元素上的样式并将其设置为浏览器默认值。

我需要这个来调试,我不知道是什么规则造成了伤害,我认为好的方法是删除所有样式,然后一一放松限制以检查何时开始出错。

您是否在网络上看到过任何包含以下内容的 sn-ps:

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

通过所有可能的样式等等。

【问题讨论】:

标签: css


【解决方案1】:

你不能。 CSS3 草案中提出了 initial 的值,但即使它被定义,它也会将属性设置为 CSS 规范中定义的初始值,而不是浏览器默认定义的值。例如,display 属性的初始值为inline,但浏览器肯定不会默认将所有内容呈现为内联元素。

解决原始问题的更好方法是使用调试和检查工具,例如 Firebug 或 Web Developer Extension for Firefox。它们可让您查看哪些样式适用于某个元素以及它们来自何处。

【讨论】:

  • 这就是您应该研究 rsk82 的内容
【解决方案2】:

如果您使用的是 Chrome/Safari,initial 可以很好地满足您的需求。设置后,您将看到活动样式为initial,计算出的样式为浏览器默认样式。

但是要将活动样式设置为默认值,请创建一个临时元素并将您的元素属性设置为临时值。

演示:http://jsfiddle.net/ThinkingStiff/Yb9J9/

脚本:

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;
}

输出:

【讨论】:

    【解决方案3】:

    使用在所有其他样式表之前加载的重置样式表。

    我使用http://meyerweb.com/eric/tools/css/reset/的修改版

    【讨论】:

    • 此外,开发者 ui 使用 F12 在 Safari 和 Chrome 上弹出,您还可以为 Firefox 安装 firebug add on 并查看样式的来源。
    • 我相信雅虎!也有一个
    • 请注意,这不会改变“所有可能的样式”......但不幸的是,样式的数量因浏览器而异。您应该只添加 CSS 文件引用的所有样式。
    • 例如这个sn-p没有知名度,看来我必须自己填写所有样式。这就是我要问的问题,是否有人以前这样做并在网络上发布过。
    【解决方案4】:

    试试这个。创建一个类似这样的类,然后使用它

    .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;
    }
    

    原文来自:Reset/remove CSS styles for element only

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-12-24
      • 1970-01-01
      • 2021-06-18
      • 2015-08-27
      • 2013-09-12
      • 1970-01-01
      • 2010-10-02
      相关资源
      最近更新 更多