javascript
如何使用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.
我們可以調(diào)用某個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,
現(xiàn)在，讓我們嘗試從標題中刪除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刪除某個屬性，也不會有任何區(qū)別，因為該DOM元素也被掛鉤到樣式表，并且我們也不會刪除我們編寫的任何CSS。 現(xiàn)在，讓我們重構(gòu)一下代碼，清除樣式并使用JavaScript應(yīng)用這些樣式，
<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,
我們的風格又回來了！ 大。 現(xiàn)在，讓我們嘗試使用我們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.
我們的標題不再具有小麥背景！ 大。 讓我們刪除函數(shù)內(nèi)的所有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,
一切都應(yīng)該保持不變，因為我們尚未調(diào)用或調(diào)用函數(shù)，因此現(xiàn)在讓我們在控制臺中進行操作，
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?
瞧！ 我們已經(jīng)使用JavaScript成功刪除了所有CSS屬性 ！ 您可以自己檢查一下這種方法是否適用于內(nèi)聯(lián)樣式？
翻譯自: https://www.includehelp.com/code-snippets/how-to-remove-css-property-using-javascript.aspx
總結(jié)
以上是生活随笔為你收集整理的如何使用JavaScript删除CSS属性？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： https 密钥 php,https加密
- 下一篇： 原生js设置div隐藏或者显示_Java