JavaScript学习-样式操作

最新推荐文章于 2024-03-11 20:02:49 发布
最新推荐文章于 2024-03-11 20:02:49 发布
阅读量151 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizengbao/article/details/83111471
版权

文章目录

一、获取

1.1 获取样式名——className

语法：对象名.className;

document.getElementById("container").getElementsByTagName("p").className;

1.2 获取样式属性值——style.property

注意：只能获取行内样式属性。
语法：对象名.style.样式属性;

<body>
	<p id="p1"  style="width: 200px"> style.property学习。</p>
	<script type="text/javascript">
		document.write(document.getElementById("p1").style.width);
	</script>
</body>

二、替换样式

2.1 样式

2.1.1 className

语法：对象名.className = “样式名”;

document.getElementById("p1").className = "fc";

2.1.2 setAttribute

语法：对象名.setAttribute(“class”, “样式名”)

document.getElementById("p1").setAttribute("class", "fc");

2.1.3 classList

语法：对象名.classList = “样式名”;

document.getElementById("p1").classList = "fc";

2.2 属性样式

2.2.1 style.样式属性

语法：对象名.style.color = “red”;

<body>
<p id="p1"  style="width: 200px"> style.property学习。</p>
<script type="text/javascript">
	document.getElementById("p1").style.width = "20px";
</script>
</body>

2.2.2 setAttribute

语法：对象名.setAttribute(“style”, "属性1: 属性值1; 属性2: 属性值2; ")

document.getElementById("p1").setAttribute("style", "height: 100px; width: 200px");

2.2.3 style.setProperty

语法：对象名.style.setProperty(“属性”, “属性值”);

document.getElementById("div1").style.setProperty("height", "40px" );

2.2.4 style.cssText

语法：对象名.style.cssText = "属性: 属性值 ";

document.getElementById("div1").style.cssText = "height: 100px ";

三、增加样式

3.1 classList.add(“样式名”)

语法：对象名.classList.add(“样式名”)

document.getElementById("p1").classList.add("fc");

四、删除样式

4.1 classList.remove(“样式名”)

语法：对象名.classList.remove(“样式名”)

document.getElementById("p1").classList.remove("fc");
绝世小熊熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习------JavaScript实现
LIUHONGLIAN
08-17 216
JavaScript实现由三个不同部分组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。 ECMAScript由ECMA-262定义，提供核心语言功能； 文档对象模型（DOM）提供访问和操作网页内容的方法和接口； 浏览器对象模型（BOM）提供与浏览器交互的方法和接口； ECMAScript ECMAScript规定的组成部分：语法、类型、语句、关键字、保...
JavaScript学习-jQuery
王学明
06-10 184
XMind下载链接 概述 选择器 操作DOM 事件 动画 AJAX 扩展
js中getElementsByClassName和getElementsByTagName无法获取元素
Jclam的博客
03-07 1840
js中getElementsByClassName和getElementsByTagName无法获取元素
vue更换主题设置主题
YingDaoMonkey的博客
04-01 2159
1、创建一个后缀为.scss文件将下述代码放进去。将scss文件引入main.js中(如果引入报错可以网上搜一下，很多！) :root { --bg_white_color: #fff; --bg_pink_color:pink; --bg_black_color:#373737; --bg_huiSe_color:#ccc; --bg_HongSe_...
js动态修改scss和stylue变量值
qq_44929535的博客
03-12 1069
1.在style标签中定义 //:root在最外层的组件定义就行，其他子组件内不用重新定义，可以直接使用 :root { –width-primary: 1rem; } 2.使用 .test{ font-size: calc(var(–width-primary) + 1rem); } 3.js中修改变量值 document.getElementsByTagName(‘body’)[0].style.setProperty(’–width-primary’, ‘1rem’); 补充：还可以通过以下方式来定义
vue项目如何套样式_VUE项目实现主题切换的多种方法
weixin_42126749的博客
02-05 1316
需求是 做一个深色主题和浅色主题切换的效果方法一 多套css这个方法也是最简单，也是最无聊的。动态获取父级class名称，进行一个父级class的多次定义{{ className == "box" ? "开灯" : "关灯" }}export default {name: "Centre",data() {return {className: "box"};},methods: {// 改变cla...
vue项目中主题色问题
me_ting的博客
04-27 730
首先主题颜色是后台接口返回到前台的。接下来我总结一下我的项目： 1、这个接口页面一打开就调用了 2、新css属性setProperty document.getElementsByTagName('body')[0].style.setProperty('--primaryColor', '#fd6b21'); --primaryColor：是我对颜色的命名；#fd6b21：可以替换成后台返回的颜色值 3、在样式里面可以直接写你的颜色了 color:var(--primaryColor); ..
vue自定义主题皮肤方案
最新发布
weixin_46115723的博客
03-11 643
vue自定义主题皮肤方案
javascript-:学习 JavaScript 30
08-05
这个课程涵盖了从基础到高级的各种主题，鼓励学习者通过动手实践来深入理解JavaScript的核心概念。在30个不同的挑战中，你将有机会接触到事件处理、DOM操作、动画、音频/视频处理、SVG以及更多的现代JavaScript特性...
javascript-practice-problems
05-26
6. **事件与DOM操作**：理解DOM（Document Object Model）结构，学习如何通过JavaScript操作DOM元素，包括选择元素、添加/删除元素、改变元素属性和样式，以及处理用户事件。 7. **AJAX**：学习如何使用...
js控制CSS样式属性语法对照表
12-12
CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。 例如常用的关闭某个漂浮的广告显示:document.getElementById(‘ad’).style.display=’none’;相当于：.ad{ display:none}. 下面就是JS 控制CSS样式表的语法对照： 盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border border border-bottom borderBottom border-botto
javascript基础----Typora.rar
08-31
`JS基础语法.assets` 文件可能包含与markdown文档配套的图片、图表或样式，以帮助视觉上更好地理解和展示JavaScript的语法结构和概念。例如，流程图可以用来解释控制流，表格可以列出不同数据类型的特点，示例代码...
Javascript学习笔记-学JS的一手教程
05-07
JavaScript学习笔记 JavaScript是一种强大的、跨平台的编程语言，主要用于为网页和应用程序添加交互性。在Web开发中，JavaScript与HTML和CSS一起构成了基础的三驾马车。本教程将帮助初学者理解JavaScript的核心概念...
Javascript--30-
03-08
标题"JavaScript--30-"可能指的是一个系列教程或者挑战，其中包含了30个JavaScript相关的主题或练习，旨在帮助学习者深入理解和掌握JavaScript的基本概念和实践技巧。 描述中没有提供具体的信息，但我们可以推测这...
设置主题色
duanyuehuan
03-17 300
设置主题色
如何获取scss里的值与如何修改scss里的值
woshi759956817的博客
04-07 1302
获取 在scss文件里配置 接着在min.js中引入scss文件，这里我的scss文件已经在index.scss文件里引入 在当前页面引入你要获取的scss文件 然后再data中声明 设置 按照上述的设置好scss文件后不需要再当前页面引入 然后再JS中设置即可 document.getElementsByTagName('body')[0].style.setProperty('--size', '250px'); ...
JS属性样式和事件
a83491的博客
06-28 279
无
js 动态给style标签内添加样式
qq_40113688的博客
02-08 1878
【代码】js 动态给style标签内添加样式。
实现js动态设置css样式，js动态设置全局样式主题色
weixin_46221198的博客
08-02 2339
需求： 1.设置一个全局的样式 2. 样式是需要动态改变的，改变的内容是通过请求后台接口获取的，因此需要js能够对css进行改变 实现： 或许你可能不相信，代码只需要几行 js代码： // 设置主题色 document.getElementsByTagName('body')[0].style.setProperty('--themeColor', '#2CB4FF'); --themeColor是自定义的样式代号 css代码： .title{ color: var(--th

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值