如何使用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

输出量

remove CSS property using JavaScript (1)

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

输出量

remove CSS property using JavaScript (2)

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

输出量

remove CSS property using JavaScript (3)

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

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

heading.style.removeProperty("background");

Output

输出量

remove CSS property using JavaScript (4)

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

输出量

remove CSS property using JavaScript (5)

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

输出量

remove CSS property using JavaScript (6)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django 缓存系统

Django 是动态网站&#xff0c;一般来说需要实时地生成访问的网页&#xff0c;展示给访问者&#xff0c;这样&#xff0c;内容可以随时变化&#xff0c;但是从数据库读多次把所需要的数据取出来&#xff0c;要比从内存或者硬盘等一次读出来 付出的成本大很多。 缓存系统工作原理…

java web截屏_java_WebDriver中实现对特定的Web区域截图方法,用过 WebDriver 的同学都知道,We - phpStudy...

WebDriver中实现对特定的Web区域截图方法用过 WebDriver 的同学都知道&#xff0c;WebDriver 可以对浏览器中的页面进行截图。例如&#xff1a;public byte[] takeScreenshot() throws IOException {TakesScreenshot takesScreenshot (TakesScreenshot) driver;return takesSc…

c语言 关键字const_C ++ const关键字| 查找输出程序| 套装1

c语言 关键字constProgram 1: 程序1&#xff1a; #include <iostream>using namespace std;void fun(int& A) const{A 10;}int main(){int X 0;fun(X);cout << X;return 0;}Output: 输出&#xff1a; [Error] non-member function void fun(int) cannot ha…

【喜报】JEEWX荣获“2016 年度码云新增热门开源软件排行榜”第一名!

为什么80%的码农都做不了架构师&#xff1f;>>> 2016 年度码云新增项目排行榜 TOP 50 正式出炉&#xff01;根据 2016 年在码云上新增开源项目的 Watch、Star、Fork 数量以及其他角度的统计&#xff0c;JEEWX捷微管家荣获“2016 年度码云新增热门开源软件排行榜”第…

java 二叉树特点_疯狂java笔记之树和二叉树

树的概述树是一种非常常用的数据结构&#xff0c;树与前面介绍的线性表&#xff0c;栈&#xff0c;队列等线性结构不同&#xff0c;树是一种非线性结构1.树的定义和基本术语计算机世界里的树&#xff0c;是从自然界中实际的树抽象而来的&#xff0c;它指的是N个有父子关系的节点…

编辑距离 dp_使用动态编程(DP)编辑距离

编辑距离 dpProblem: You are given two strings s1 and s2 of length M and N respectively. You can perform following operations on the string. 问题&#xff1a;给您两个长度分别为M和N的字符串s1和s2 。 您可以对字符串执行以下操作。 Insert a character at any posi…

tomcat +apache 配置集群

2019独角兽企业重金招聘Python工程师标准>>> APACHE2.2.25TOMCAT6.0.37配置负载均衡 目标: 使用 apache 和 tomcat 配置一个可以应用的 web 网站&#xff0c;要达到以下要求&#xff1a; 1. Apache 做为 HttpServer &#xff0c;后面连接多个 tomcat 应用实例&…

java双缓存机制_详解JVM类加载机制及类缓存问题的处理方法

前言大家应该都知道&#xff0c;当一个Java项目启动的时候&#xff0c;JVM会找到main方法&#xff0c;根据对象之间的调用来对class文件和所引用的jar包中的class文件进行加载(其步骤分为加载、验证、准备、解析、初始化、使用和卸载)&#xff0c;方法区中开辟内存来存储类的运…

oracle中dbms_并发和由于DBMS中的并发导致的问题

oracle中dbms并发 (Concurrency) The ability of a database system which handles simultaneously or a number of transactions by interleaving parts of the actions or the overlapping this is called concurrency of the system. 数据库系统通过交织部分操作或重叠操作来…

什么是mvc?

什么是MVCMVC 是一种设计模式&#xff0c;它将应用划分为3 个部分&#xff1a;数据&#xff08;模型&#xff09;、展现层&#xff08;视图&#xff09;和用户交互层&#xff08;控制器&#xff09;。换句话说&#xff0c;一个事件的发生是这样的过程&#xff1a;1&#xff0e;…

mysql的安装和基本命令_MySQL安装以及简单命令用法

MYSQL:关系型数据库存储引擎:负责将逻辑层的概念转化为物理层机制&#xff0c;在物理层完成物理机制。支持事务&#xff1a;transaction必须满足的条件&#xff1a;ACID(一致性,持久性,原子性,隔离性)锁&#xff1a;并发访问随机访问&#xff1a;数据在磁盘上是随机存储的安装&…

将数组转换为JavaScript中的对象

Lets say you have the following array, 假设您有以下数组&#xff0c; const nums [1, 2, 3, 4, 5];console.log(nums);Output 输出量 (5) [1, 2, 3, 4, 5]We know that nums is an array and we can see in the output that we get an array. Lets convert it into an ob…

docker集群运行在calico网络上

2019独角兽企业重金招聘Python工程师标准>>> ##网络及版本信息 docker1 centos7 192.168.75.200 docker2 centos7 192.168.75.201 物理网络 192.168.75.1/24 Docker version 1.10.3, build 3999ccb-unsupported &#xff0c;安装过程略 # calicoctl version Version…

python批量雷达图_python批量制作雷达图

老板要画雷达图&#xff0c;但是数据好多组怎么办&#xff1f;不能一个一个点excel去画吧&#xff0c;那么可以利用python进行批量制作&#xff0c;得到样式如下&#xff1a;首先制作一个演示的excel&#xff0c;评分为excel随机数生成&#xff1a;1 INT((RAND()4)*10)/10加入标…

JavaScript中带有示例的Math.log()方法

JavaScript | Math.log()方法 (JavaScript | Math.log() Method) Math.log() is a function in math library of JavaScript that is used to return the value of natural Log i.e. (base e) of the given number. It is also known as ln(x) in mathematical terms. Math.log…

SUI踩坑记录

SUI踩坑记录 最近做了个项目选型了SUI和vue做单页应用。下面记录一下踩坑经历SUI 介绍 sui文档&#xff1a;http://m.sui.taobao.org/SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美&#xff0c;只需要引入我们的CDN文件就可以使用&#xff0c;并且能兼容到 i…

java 写入xml文件_java读写xml文件

要读的xml文件李华姓名>14年龄>学生>张三姓名>16年龄>学生>学生花名册>package xml;import java.io.FileOutputStream;import java.io.OutputStreamWriter;import java.io.Writer;import java.util.Iterator;import java.util.Vector;import javax.xml.pa…

JavaScript中带有示例的Math.max()方法

JavaScript | Math.max()方法 (JavaScript | Math.max() Method) Math.max() is a function in math library of JavaScript that is used to return the greatest value of all the passed values to the method. Math.max()是JavaScript数学库中的函数&#xff0c;用于将所有…

java 修饰符默认_Java和C#默认访问修饰符

C#中&#xff1a;针对下面几种类型内部成员的访问修饰符&#xff1a;enum的默认访问修饰符&#xff1a;public。class的默认为private。interface默认为public。struct默认为private。其中&#xff1a;public可以被任意存取&#xff1b;protected只可以被本类和其继承子类存取&…

JavaScript中带有示例的Math.abs()方法

JavaScript | Math.abs()方法 (JavaScript | Math.abs() Method) Math operations in JavaScript are handled using functions of math library in JavaScript. In this tutorial on Math.abs() method, we will learn about the abs() method and its working with examples.…