JavaScript操作元素样式

最新推荐文章于 2023-03-23 16:57:51 发布
最新推荐文章于 2023-03-23 16:57:51 发布
阅读量450 收藏 2
点赞数
分类专栏： JavaScript基础知识 文章标签： javascript html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_ik_Z/article/details/117084098
版权

JavaScript操作元素样式

操作元素样式有两种方法：

一、 style.css属性操作
  • 局限性：只能一个一个地设置元素样式。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
<body>
	<div class="box">hello!</div>
	<script>
		// 这样设置重复代码太多，看起来会太繁琐。
		var div = document.querySelector('div')
		div.style.width = '300px'
		div.style.height = '150px'
		div.style.textAlign = 'center'
		div.style.border = '1px solid black'
		div.style.lineHeight = '150px'
		div.style.color = 'blue'
	</script>
</body>
</html>
二、 className方法操作
  • 优点：可以一次设置多个样式。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width:300px;
			height:150px;
			text-align:center;
			border:1px solid black;
			line-height:150px;
			color:blue;
		}
	</style>
<body>
	<div>hello!</div>
	<script>
		var div = document.querySelector('div')
		div.className = 'box'	// 使用className同时设置多个样式。
	</script>
</body>
</html>
一个想做架构师的前端开发学生
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js操作元素样式、元素内容和元素属性的方法
weixin_50613702的博客
12-10 3019
一、JS操作元素内容及元素属性 1 操作元素内容 简介： 元素内容指开始标签与结束标签之间的内容，单标签没有元素内容，表单标签除外。 1.1操作闭合标签内容 1.闭合标签的内容需要设置或修改，使用闭合标签的innerHTML属性。 语法： 设置：标签.innerHTML = “内容”； 获取：var text = 标签.innerHTML； var a= document.getElementById("text"); //1.设置内容。 a.innerHTML = "内容"； //2.innerHTM
JavaScript操作HTML元素和样式的方法详解
10-23
主要介绍了JavaScript操作HTML元素和样式的方法,通过HTML DOM来进行相关的元素添加和删除,需要的朋友可以参考下
js操作元素样式
weixin_30657999的博客
10-13 81
一，内嵌样式： 1 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> 2 <script> 3 var myDiv = document.getElementById("myDi...
JS操作元素样式
weixin_51235620的博客
10-22 4608
通过js修改元素样式：   语法：元素.style.样式名=样式值； 如果css样式名中含有-，这种名称在js中是不合法的，比如：background-color需要将这种样式名修改为驼峰命名法：去除-，-后面第一个单词首字母大写，该属性名要改为backgroundColor。   通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即执行。   但是：如果在样式中添加了！important,此时改样式具有最高的优先级，即使通过js也无法覆盖改样式，此时js修
js 操作元素样式、元素内容和元素属性的方法
旺仔牛奶的博客
12-10 186
js 操作元素样式、元素内容和元素属性的方法 一、操作元素样式的方法 操作元素样式 属性名 用法 元素.style.样式属性名 作用2 设置表单的内容 用法 元素.style.样式属性名 = “属性值” 注意点 Style中background-color font-size 等这类属性 在操作的时候，都需要写作驼峰命名法 backgroundColor fontSize cssText 元素.style.cssText = “行内css样式” 二、操作类名的方法
【DOM】DOM操作之如何修改元素的样式_03
青春木鱼的博客
05-14 5330
DOM操作之如何修改元素的样式，无论修改内联样式还是修改样式表中的样式，都使用：元素.style.css属性名="属性值"来修改、另外，今后只要获得css属性值，都要获得计算后的样式：var style=getComputedStyle(元素对象) ，然后从style中获取对应的css属性值：style.css属性
JavaScript程序设计-DOM操作元素样式.docx
11-02
JavaScript程序设计
JavaScript程序设计DOM操作元素样式共6页.pd
11-19
JavaScript程序设计DOM操作元素样式共6页.pdf.zip
JQuery操作元素的css样式
01-19
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
qq_44156869的博客
11-14 4339
操作元素 JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 改变元素内容 element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 ...
js中元素样式设置的六种方法
weixin_52452081的博客
03-23 6215
pink;</</</</
70 DOM——HTML元素样式操作
Blog of Lytracy
11-15 1098
1、元素样式操作的三种方式 第⼀种：oDiv.style.display=“block”; 第⼆种：oDiv.style[“display”]=“block”; 2、回顾style方式 元素样式语法：style.属性名称。 要求：需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。 举例：设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。 更多的元素样式如下： 示例： CSS中的float样式与JavaScript的保留字冲
如何使用CSS来修改元素的样式
m0_67176957的博客
03-04 2508
使用CSS来修改元素的样式 第一种方式(内联样式/行内样式)：在标签内部通过style属性来设置元素的样式 问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍。并且当样式发生变化时，我们必须要一个一个修改，非常不方便。 【注意】：开发时绝对不要使用内联样式。 <p style=“color:yellow; font-size: 60px;”少小离家老大回，乡音无改鬓毛衰</p>【注意不要缺少字符】 第二种方式【内部样式表】：样式编写到
操作元素之样式属性操作
weixin_67110633的博客
02-02 224
1.element.style 行内样式操作2.element.ClassName 类名样式操作案例如下：下面有一个div，颜色为红色，当我点击这个div，颜色变为粉色，并且改变他的宽度注：1.JS里的样式采取驼峰命名法2.JS修改style样式操作，产生的是行内样式，css权重比较高。
js操作元素的样式
bingmo_的博客
10-10 611
<html> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #showdiv{ ...
js 操作元素样式style、类名class
weixin_43294560的博客
11-04 1189
操作样式 **操作html的style属性中的样式** 添加样式 对象名.style.去掉样式中的-，并-后的首字母为大写 showdiv.style.backgroundColor="red"; 删除样式 将样式值赋为空,就近原则，若标签中有style属性，css代码域中有属性，则会先将标签中style属性为空，显示css中属性 showdiv.style.backgr...
jQuery学习之操作元素样式
独狼的博客
06-27 165
<html> <head> <title>操作元素样式</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } .common{ width: 300px;
JS设置获取元素CSS样式的方法
热门推荐
吴小迪的博客
06-23 3万+
获取元素CSS样式的方法： element.style - - 获取行内（内联）样式表对象 window.getComputedStyle(element) - - 获取经过计算最后起作用的样式规则对象 - - 该方法在IE9之前的浏览器中有兼容问题 IE9之前浏览器使用 element.currentStyle 属性来获取经过计算起作用的样式规则 PS：element 表示待求解样式的 DO...
JS修改元素的样式
乔的博客
06-09 2万+
<html> <head> <style> #a{ width:700px; height:300px; font-size:50px; color:red; background-color:grey; z-index:2; position:absolute; top:13...
web的js怎么操作元素样式的z-index
最新发布
06-08
要操作元素的 z-index 样式，可以使用 JavaScript 中的 style 属性，例如： ```javascript // 获取元素 const element = document.getElementById('myElement'); // 设置 z-index 样式 element.style.zIndex = 100...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值