如何使用JavaScript删除CSS属性？

In this article, we'll see how we can remove a CSS property from a certain element using JavaScript? We can remove only those properties that we assign ourselves and the pre-default ones cannot be removed by this method.

在本文中，我们将看到如何使用JavaScript从某个元素中删除CSS属性？ 我们只能删除分配给我们的属性，而默认属性不能被此方法删除。

HTML:

HTML：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Removing CSS property</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {background: silver;
}
h2 {background: wheat;
padding: 10px;
}
.btn {background: tomato;
}
.text {font-weight: 500;
}
</style>
<body>
<div class="container">
<h2>Let's remove some css!</h2>
<div class="container">
<button class="btn">Just a random button!</button>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora quis asperiores dicta quos laborum laboriosam perferendis ab veniam odit saepe, obcaecati officiis iure iste voluptates at quod commodi cupiditate voluptas!</p>
</div>
</div>
</body>
<script>
</script>
</html>

Output

输出量

We can call on a certain DOM selector's style property and use the remove property method to remove that particular CSS property. First, let's get a reference to all the DOM elements.

我们可以调用某个DOM选择器的style属性，并使用remove属性方法删除该特定CSS属性。首先，让我们参考所有DOM元素。

<script>
const heading = document.querySelector('h2');
const button = document.querySelector('.btn');
const para = document.querySelector('.text');
</script>

Now let's try to remove the background property from our heading,

现在，让我们尝试从标题中删除background属性，

heading.style.removeProperty("background");

Oops! That didn't quite work, did it? There's a simple explanation. We are loading our scripts when our whole page loads and the styles are written inside our stylesheet. Even if we remove a certain property using JavaScript, it wouldn't make any difference since that DOM element is also hooked to a stylesheet and we aren't removing any kind of CSS that we have written. Let's refactor our code a little bit now, let's clear out styles and apply those styles using JavaScript,

糟糕！那不是很有效，对吗？有一个简单的解释。当整个页面加载并且样式写在样式表中时，我们正在加载脚本。即使我们使用JavaScript删除某个属性，也不会有任何区别，因为该DOM元素也被挂钩到样式表，并且我们也不会删除我们编写的任何CSS。现在，让我们重构一下代码，清除样式并使用JavaScript应用这些样式，

<style>
/* body{background: silver;
}
h2{background: wheat;
padding: 10px;
}
.btn{background: tomato;
}
.text{font-weight: 500;
} */
</style>

Output

输出量

As you can see now all our styles are removed. Let's add them back in our JavaScript,

如您所见，我们的所有样式均已删除。让我们将它们重新添加到JavaScript中，

<script>
const heading = document.querySelector('h2');
const button = document.querySelector('.btn');
const para = document.querySelector('.text');
heading.style.background = "wheat";
heading.style.padding = "10px";
document.querySelector('body').style.background = "silver";
button.style.background = "tomato";
para.style.fontWeight = "500";
</script>

Output

输出量

And we have our styles back! Great. Now let's try removing them using our JavaScript,

我们的风格又回来了！大。现在，让我们尝试使用我们JavaScript删除它们，

heading.style.removeProperty("background");

Output

输出量

Our heading no longer has a wheat background! Great. Let's remove all the CSS properties inside a function and see if we get back the same unstyled page.

我们的标题不再具有小麦背景！大。让我们删除函数内的所有CSS属性，看看是否返回相同的未样式化页面。

function removeProperties() {document.querySelector('body').style.removeProperty("background");
heading.style.removeProperty("background");
heading.style.removeProperty("padding");
button.style.removeProperty("background");
para.style.removeProperty("fontWeight");
}

Output

输出量

Everything should remain the same as we have not yet called or invoked our function so let's do it now inside our console,

一切都应该保持不变，因为我们尚未调用或调用函数，因此现在让我们在控制台中进行操作，

    removeProperties();

Output

输出量

Voila! We have successfully removed all our CSS properties using JavaScript! Can you check for yourself is this method works for inline styles?

瞧！我们已经使用JavaScript成功删除了所有CSS属性 ！您可以自己检查一下这种方法是否适用于内联样式？

翻译自: https://www.includehelp.com/code-snippets/how-to-remove-css-property-using-javascript.aspx

如何使用JavaScript删除CSS属性？相关推荐

使用JavaScript删除CSS属性
如何使用JavaScript删除CSS属性?下面本篇就来给大家介绍一下使用JavaScript删除CSS属性的方法,希望对大家有所帮助. 方法一:使用removeProperty()方法 remove ...
html title属性无效_【学习教程】使用JavaScript删除CSS属性
方法1:使用CSS removeProperty:该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性.通过遍历styleSheets数组并 ...
js,jq,jquery删除css属性
属性值是不能删除的,只能改变属性值达到我们想要的效果 1.去掉div的高度 <div style='height:50px' id='height'></div> <sc ...
jq删除某个css样式,jq删除属性_使用jquery删除css属性或样式
摘要腾兴网为您分享:使用jquery删除css属性或样式,中国体育,有信,相机美颜,腾讯小说等软件知识,以及来电,会动的手机壁纸,网销客,酷6,我不是我没有表情包,乐校通,搜达足球网,led滚动显示 ...
使用 JavaScript 删除disabled属性
要删除disabled属性,请选择元素并调用其 removeAttribute()上的方法,将其disabled作为参数传递,例如 btn.removeAttribute('disabled'). 该 ...
Jquery删除css属性
有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢?可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会 ...
JavaScript删除元素属性
没删除前执行了如下删除属性方法 $('#ename').removeAttr('readonly') 删除后已经成功被删除掉属性 readonly 了
javaScript删除对象属性总结方法
一.删除js中对象中属性 1.使用delete运算符例: 1) 使用点属性访问器删除: delete object.property; 在属性访问器上应用delete运算符时,运算符会从对象中删除相 ...
js .style javaScript控制css属性
盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...

如何使用JavaScript删除CSS属性？

如何使用JavaScript删除CSS属性？相关推荐

最新文章

热门文章