操作元素节点对象的样式

最新推荐文章于 2024-11-05 15:31:54 发布
最新推荐文章于 2024-11-05 15:31:54 发布
阅读量350 收藏 7
点赞数 11
分类专栏： js 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42307546/article/details/136431450
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态操作样式</title>
	<style type="text/css">
		.highLight{
			background-color: black;
			color: white;
			width: 250px;
			height: 250px;
			line-height: 250px;
			text-align: center;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<p id='box'>MJJ</p>
	<script type="text/javascript">
		// nodeObj.style
		var para = document.getElementById('box');
		/*
		1、直接操作样式属性
		console.log(para.style);
		para.style.color = 'white';
		para.style.backgroundColor = 'black';
		para.style.width = '250px';
		para.style.height = '250px';
		para.style.textAlign = 'center';
		para.style.lineHeight  = '250px';
		para.style.fontSize  = '30px';
		*/

		// 2、通过控制属性的类名来控制样式
		para.setAttribute('class', 'highLight');





		
	</script>
</body>
</html>
qq_42307546
关注
专栏目录
js—— 样式操作和节点操作
趙尒七
03-04 203
1.样式操作： # 行内样式（设置到元素行内） 特点： 设置style.属性名 设置到元素行内 获取style.属性名 可以获取行内样式 获取不到文本内部及外部样式 #计算样式：（获取文本外部的样式） 获取元素文本外属性值： getComputedstyle(对象).属性名字 只能获取 不能设置 ##注意 用在---》父盒子没有限定高度 完全有内...
html对象添加子元素,Dom节点对象操作方法 ，用document创建节点对象，追加节点，追加内容以及增加，删除，复制...
weixin_36315943的博客
06-25 3630
节点的创建追加创建新节点document.createElement(‘节点名’);追加子节点appendChild把节点对象加到body中document.body.appendChild()var tab = document.createElement('table');//创建节点对象tabletab.innerHTML='hello world';//为节点对象添加内容document....
uniapp动态修改元素节点样式
热门推荐
weixin_42349568的博客
08-19 1万+
一，通过style属性绑定来修改 第一步：肯定是需要获取元素节点 在uniApp项目中没有windouw对象，所以通过document不能直接获取dom节点，vue的refs只对自定义组件有效，对uniapp中的标签不生效。 查看uniapp官网有一个uni.createSelectorQuery() API；可以通过这个属性获取标签的样式，在通过动态绑定样式来修改； html: <button type="default" @click="handleFont">点击增大字体</butt
HTML读取元素节点样式表里的样式
weixin_53657413的博客
11-26 621
IE 游览器是通过 元素.currentStyle.样式名 来获取元素的当前显示的样式，其它的浏览器都不支持 在其它浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用，但是需要两个参数： 第一个参数：要获取样式的元素 第二个参数：可以传递一个伪元素，一般都传null 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过 对象.样式名 来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没
DOM: 操作元素、操作节点、DOM总结
weixin_49555741的博客
05-09 1321
1. 操作元素 1.1 排他思想（算法）（重要） 如果有同一组元素，想要某个元素实现某种样式，需要用到循环的排他思想算法： 所以元素全部清除样式 给当前元素设置样式 1.1.1 百度换肤效果 分析： 给元素注册事件 给4个图片循环注册点击事件 点击图片，背景颜色改当前的图片 核心算法：把当前图片的src路径取过来，给body做背景 1.1.2 表格隔行变色案例 分析： 鼠标事件：鼠标经过 onmouseover 离开 onmouseout 核心思路：鼠标经过tr行，当前行变背
JavaScript中DOM操作元素及节点操作
m0_52942098的博客
06-08 755
目录操作元素操作元素内容操作元素属性操作元素样式操作style属性（行内样式操作）操作className属性（类名样式操作）自定义属性操作获取属性值操作属性值移除属性值H5自定义属性设置H5自定义属性获取自定义属性节点操作 操作元素 JavaScript中的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。 操作元素内容 方法 作用 innerHTML 设置或返回开始标签和结束标签之间的内容，包括html标签、空格、换行等格式字符 inne
vue获取dom元素节点并操作元素的样式（$el的用法操作元素样式）
weixin_70426591的博客
10-27 5079
vue中操作dom元素
JS 获取元素对象/添加节点
02-16 759
一、设置或获取元素对象中（标签中）的属性和自定义属性 对象.属性 对象['属性'] 对象.getAttribute('属性名') 对象.setAttribute('属性名','属性值'); 对象.removeAttribute('属性名') 二、outerHTML : 当前节点对象及所有子节点（标签及所有内容） innerHTML...
节点和元素属性样式
langmanboy的博客
04-13 1285
节点和元素属性样式 1. 创建节点 1-1 creatTextNode document.createTextNode(data) 创建一个新的文本节点，data 是一个字符串为文本节点的内容 <div class="container"></div> <script> // creattextNode 文本节点 let elem = document.querySelector('.container'); let text = documen
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
它接受一个字符串参数作为文本内容，并返回一个文本节点对象。例如，`var objNode = document.createTextNode("段落五");`创建了一个包含文本“段落五”的文本节点。 知识点4：添加子节点 要将一个节点添加为另一个...
document节点对象的获取方式示例介绍
09-04
以下是一些获取`document`节点对象的主要方法，通过这些方法我们可以获取到页面上的特定元素进行操作。 1. **通过ID获取**： `getElementById()`方法是获取页面上具有指定ID的唯一元素。在示例中，`documentDemo()...
jQuery获取单击节点对象的方法
10-22
通过本文所述内容，开发者可以掌握使用jQuery获取和操作单击节点对象的基本技巧。在应用这些技巧的同时，还需注意保持代码的可读性和可维护性，适时利用在线工具来优化代码质量。此外，不断地学习和探索jQuery的其他...
JS实现添加,替换,删除节点元素的方法
10-22
最基础的方法是使用`createElement`来创建新的元素节点，再使用`appendChild`或`insertBefore`来将该节点添加到DOM树中。`appendChild`方法会将新节点添加到父节点的子节点列表的末尾，而`insertBefore`则可以将新...
Webserver(3.3)生产者消费者模型
最新发布
学习历程记录和分享
11-05 183
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 301
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 98
vxe-grid新增空行，并且定位到空行位置。
Web前端第二次作业
nixiaoge的博客
11-05 115
作业要求：制作带有下拉悬停菜单的导航栏。
前端 常见开发工具使用
weixin_45534301的博客
10-31 497
【代码】前端 常见开发工具使用。
掌握HTML DOM对象编程：浏览器核心与元素操作详解
DOM是HTML和XML文档的抽象表示，它使得JavaScript等脚本语言能够以编程方式操作和修改HTML文档的结构、内容和样式。这一章节详细介绍了浏览器的主要对象，这些对象在DOM编程中扮演着核心角色。 首先，6.1节介绍HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值