首页 > 编程语言 >【开发小技巧】01-如何使用JavaScript删除CSS属性?

【开发小技巧】01-如何使用JavaScript删除CSS属性?

时间:2022-09-28 15:10:23浏览次数:77  
标签:01 color text JavaScript remove element property CSS 属性

【开发小技巧】01-如何使用JavaScript删除CSS属性?_css

句法:

element.removeProperty('property')

实例1:


<!DOCTYPE html>
<html>

<head>
<title>
How to remove CSS property using JavaScript?
</title>
<style>
.elem {
color: green;
font-size: 3rem;
text-decoration: underline;
}
</style>
</head>

<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to remove CSS property using JavaScript?
</b>
<div class="elem">Hello World!</div>
<p>
Click on the button below to remove
the text decoration of the element
</p>
<button onclick="removeProperty()">
Remove text-decoration property
</button>
<script>
function removeProperty() {
element =
document.styleSheets[0].cssRules[0].style;
element.removeProperty('text-decoration');
}
</script>
</body>

</html>

输出:

在单击按钮之前:

【开发小技巧】01-如何使用JavaScript删除CSS属性?_javascript_02


单击按钮后:

【开发小技巧】01-如何使用JavaScript删除CSS属性?_javascript_03

方法2:使用setProperty方法:该CSSStyleDeclaration.setProperty()方法可用于设置的样式的所需的属性。选择必须删除其属性的元素,并将此属性应用于其style属性。将此属性设置为“ initial”可将属性重置为其初始值,从而消除该属性的任何影响。

句法:

element.style.setProperty('color','initial')

例如:



<!DOCTYPE html>
<html>

<head>
<title>
How to remove CSS property using JavaScript?
</title>
<style>
.elem {
color: green;
font-size: 3rem;
text-decoration: underline;
}
</style>
</head>

<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to remove CSS property using JavaScript?
</b>
<div class="elem">Hello World!</div>
<p>
Click on the button below to remove the text
color of the element
</p>
<button onclick="removeProperty()">
Remove color property
</button>
<script>
function removeProperty() {
element = document.querySelector('.elem');
element.style.setProperty('color', 'initial');
}
</script>
</body>

</html>

输出:

  • 在单击按钮之前:

【开发小技巧】01-如何使用JavaScript删除CSS属性?_html_04

单击按钮后:

【开发小技巧】01-如何使用JavaScript删除CSS属性?_css_05

本文完~


【开发小技巧】01-如何使用JavaScript删除CSS属性?_css_06

【开发小技巧】01-如何使用JavaScript删除CSS属性?_javascript_07

标签:01,color,text,JavaScript,remove,element,property,CSS,属性
From: https://blog.51cto.com/u_15809510/5719394

相关文章

  • 【开发小技巧】09—如何使用HTML和CSS将文字环绕在图片上?
    英文| https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/?ref=rp翻译|web前端开发(ID:web_qdkf)对于任何类型的网站,在文字周围包......
  • javaScript--4 onchange 事件
    <!DOCTYPEhtml><html><head><title>事件</title></head><body><h2>----------------onchange事件--------------------</h2><!--onchange事......
  • 直播软件app开发,JavaScript应用定时器实现倒计时
    直播软件app开发,JavaScript应用定时器实现倒计时 <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body>手机号码:<inputtype="text"/><bu......
  • 直播开发app,JavaScript生成随机数
    直播开发app,JavaScript生成随机数<scripttype="text/javascript">//产生随机数functiongetRandom(min,max){vara=Math.floor((Math.random())*(max-1+min)+min)return......
  • CSS属性vertical-align
    一、简介vertical-align的意思是在垂直方向进行对齐。它主要对以下属性有效:inline元素inline-block元素table-cell元素::first-letter和::first-line取......
  • 59、Window10+VS2019调用百度的API进行活体检测
    基本思想:给客户搞了个摄像头的人证比对历程,真艰辛;本以为很简单的一个事情,最开始是人证比对,客户搞成了照片测试;我又搞成了眨眼测试,客户用上了手机播放视频;我又又搞成了手机......
  • 打印机共享出现0x0000011b错误
    补丁代号KB5005565/KB5005566/KB5005568/KB5005569/KB5005573......卸载上述补丁即可解决问题,卸载后记得重启电脑才会生效。卸载补丁,装的win11家庭版,卸载了会自动更新(下......
  • CSS篇四
    一、CSS的引入方式按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分文三大类:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)1.内部样式表内部样式表(内嵌样式表......
  • P3960 NOIP2017 提高组 列队
    P3960NOIP2017提高组列队将每一行的第1到m-1个和第m列分离出来分析知这n+1个“区间”要维护弹出第k个和插入最后使用平衡树,一个区间若没有被算则用[l,r]表示(方伯伯......
  • P3285 [SCOI2014]方伯伯的OJ
    P3285SCOI2014方伯伯的OJSplay+将一个区间合并为一个点,类似P3960NOIP07列队用STL的map存被合并区间的右端点对应的节点下标,查询节点下标时lower_bound即可点击查......