如何删除使用.css()函数添加的样式?

2020/09/19 21:31 · javascript ·  · 0评论

我正在使用jQuery更改CSS并希望根据输入值删除要添加的样式:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

我怎样才能做到这一点?

请注意,只要使用颜色选择器选择了颜色(即,当鼠标移至色轮上时),以上行就会运行。

第二注:我不能这样做,css("background-color", "none")因为它将从CSS文件中删除默认样式

我只想删除
jQuery
background-color添加内联样式

将属性更改为空字符串似乎可以完成此工作:

$.css("background-color", "");

可接受的答案有效,但是style在我的测试中DOM上留有空属性。没什么大不了的,但是这消除了这一切:

removeAttr( 'style' );

假定您要删除所有动态样式并返回样式表样式。

有几种使用jQuery删除CSS属性的方法:

1.将CSS属性设置为其默认(初始)值

.css("background-color", "transparent")

请参阅MDN的CSS属性初始值此处的默认值为transparent您还可以使用inherit多个CSS属性从其父级继承该属性。在CSS3 / CSS4中,您也可以使用initialrevert或者unset这些关键字可能对浏览器的支持有限。

2.删除CSS属性

空字符串将删除CSS属性,即

.css("background-color","")

但是要当心,如jQuery .css()文档中所指定的那样,这会删除该属性,但是它对某些CSS速记属性(包括background)与IE8兼容

将样式属性的值设置为空字符串,例如$('#mydiv')。css('color','')-如果该属性已被直接应用(无论是HTML样式),则会从元素中删除该属性属性,通过jQuery的.css()方法或通过对style属性的直接DOM操作。但是,它不会删除样式表或元素中已应用CSS规则的样式。警告:一个值得注意的例外是,对于IE 8及更低版本,删除快捷方式属性(例如border或background)将完全从元素中删除该样式,而不管样式表或element中的设置是什么

3.删除元素的整个样式

.removeAttr("style")

我有办法使用纯JavaScript删除样式属性,只是让您知道纯JavaScript的方法

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

这将删除完整的标签:

  $("body").removeAttr("style");

这些jQuery函数中的任何一个都应该起作用:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

只需使用:

$('.tag-class').removeAttr('style');

要么

$('#tag-id').removeAttr('style');

怎么样:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

使用我的插件:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

对于您的情况,请按以下方式使用:

$(<mySelector>).removeCss();

要么

$(<mySelector>).removeCss(false);

如果您还想删除其类中定义的CSS:

$(<mySelector>).removeCss(true);

试试这个:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

谢谢

如果您使用CSS样式,则可以使用:

$("#element").css("background-color","none"); 

然后替换为:

$("#element").css("background-color", color);

如果您不使用CSS样式,并且在HTML元素中具有属性,则可以使用:

$("#element").attr("style.background-color",color);

2018年

有本机API

element.style.removeProperty(propery)

这个也可以!!

$elem.attr('style','');

为什么不采用希望删除CSS类的样式呢?现在您可以使用:.removeClass()这也开辟了使用以下方法的可能性:.toggleClass()

(如果该类存在,则将其删除;如果不存在,则将其添加。)

在处理布局问题时,添加/删除类也不会造成更改/故障排除的混乱(相对于试图弄清为什么特定样式消失的原因)。

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

这比其他一些解决方案更为复杂,但在以下情况下可能会提供更大的灵活性:

1)进行类定义,以隔离(封装)您要有选择地应用/删除的样式。它可以为空(在这种情况下,可能应该是):

.myColor {}

2)使用这个代码,基于http://jsfiddle.net/kdp5V/167/这个答案gilly3

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

用法示例:http//jsfiddle.net/qvkwhtow/

注意事项:

  • 未经广泛测试。
  • 新值中不能包含!important或其他指令。任何此类现有指令都将通过此操作而丢失。
  • 仅更改第一次发现的styleSelector。不会添加或删除整个样式,但这可以通过更精细的方式完成。
  • 任何无效/不可用的值将被忽略或引发错误。
  • 在Chrome中(至少),非本地(如跨站点)的CSS规则不会通过document.styleSheets对象公开,因此对它们不起作用。记住此代码的“首次发现”行为,必须添加一个局部重写并对其进行操作。
  • 一般来说,document.styleSheets对操作不是特别友好,不要指望它能积极地使用。

通过这种方式来隔离样式是CSS的全部目的,即使并非如此。操纵CSS规则并不是jQuery的全部目的,jQuery操纵DOM元素,并使用CSS选择器来做到这一点。

简单在Web开发中很便宜。我建议在删除特定样式时使用空字符串

$(element).style.attr = '  ';

试试这个

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');

您使用删除样式

removeAttr( 'style' );

您可以使用:

 $("#eslimi").removeAttr("style").hide();

尝试

document.body.style=''

本文地址:http://javascript.askforanswer.com/ruheshanchushiyong-csshanshutianjiadeyangshi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!