js document-操作元素属性

最新推荐文章于 2024-03-19 15:14:55 发布
最新推荐文章于 2024-03-19 15:14:55 发布
阅读量304 收藏
点赞数
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102888717
版权 
**操作元素固有属性**
	查看
		获取对象后通过.的方式获取
			var inp=document.getElementById("uname")
			alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
	
	
	修改
		对象名.=修改值
			var inp=document.getElementById("uname");
			inp.value="哈哈";
			
			
**操作元素自定义属性**
	查看
		对象名.getAttribute("自定义属性名称");
				<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
				var inp=document.getElementById("uname");
				alert(inp.getAttribute("abc"));    //会报undefined
			
			自定义属性不能通过.属性名来获取
	 			<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
				var inp=document.getElementById("uname");
				alert(inp.abc);    //会报undefined
				
			
	修改
		对象名.setAttribute("属性名",修改值);    操作的是行内样式，不是css域的样式
		
			var inp=document.getElementById("uname");
			inp.setAttribute("abc","呵呵");
			alert(inp.getAttribute("abc"));
			
			css属性
			inp.setAttribute('style','属性值:值')
			类属性
			inp.setAttribute('class','无.的类名');
	
删除
	对象名.removeAttribute("属性名")
	
判断是否有该属性
	对象名.hasAttribute("属性名')      //返回布尔值

代码示例：


<html>
	<head>
		<meta charset="utf-8">
		<title>js document操作元素属性</title>
		<script type="text/javascript">
			function t1()
			{
				var inp=document.getElementById("uname");
				alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
			}
			function t2()
			{
				var inp=document.getElementById("uname");
				inp.value="哈哈";
				
			}
			function t3()
			{
				var inp=document.getElementById("uname");
				alert(inp.getAttribute("abc"));
			}
			function t4()
			{
				var inp=document.getElementById("uname");
				inp.setAttribute("abc","呵呵");
				alert(inp.getAttribute("abc"));
			}
		</script>
	</head>
	<body>
		<input type="button" value="查看元素属性" onclick="t1()" />
		<input type="button" value="修改元素属性" onclick="t2()" />
		<input type="button" value="查看自定义属性" onclick="t3()" />
		<input type="button" value="修改自定义属性" onclick="t4()" />
		<hr />
		用户名: <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
		
		
		
	</body>
</html>
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM修改元素节点 (增删改)
沉梦昂志
07-11 501
DOM节点的操作（重要） 上一段的内容：节点的访问关系都是属性 本段的内容：节点的操作都是函数（方法） 创建节点 格式如下： 新的标签(元素节点) = document.createElement("标签名"); 比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做： <script type="text/javascript"> var a1 = document.createElement("li"); //创建一个li标签 var a2
修改属性值
qq_38409767的博客
08-21 534
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改属性</title> </head> <body> <a href="http://www.bailiban.com" id="aLink" cla...
document的属性和方法
Vip_wk的博客
12-31 490
// 页面的主体内容 都存在document中 // 页面中的html 元素 可以通过document的相关方法获取和访问 // document.getElementById() console.dir(document); // 查看document 所有属性方法 // document的属性 document.documentEle...
JS的Document属性和方法
最新发布
忧郁的蛋的专栏
03-19 462
5、document.querySelectorAll(selector)：返回文档中匹配指定CSS选择器的所有Element元素的NodeList（静态的）。4、document.querySelector(selector)：返回文档中匹配指定CSS选择器的第一个Element元素。1、document.title：获取或设置文档的标题，通常显示在浏览器的标题栏或标签上。3、document.documentElement：获取文档的根元素，通常是元素。4、document.body：获取文档的元素。
document操作HTML的元素属性
you些话的博客
12-09 593
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js操作HTML的元素属性</title> </head> <script type="text/javascript"> //声明函数--固有属性 function testFieId(){ //获取元素对象 var inp=document.getEleme
document操作元素的属性
wyqwilliam的博客
12-14 282
<html> <head> <title>操作元素属性</title> <meta charset="UTF-8"/> <!-- 操作元素属性: 获取元素对象 获取属性： 元素对象名.属性名 修改属性： 元素对象名.属性名=新的值 注意： 不要去修改n...
jQuery学习3：操作元素属性和特性
12-09
document.getElementById(“easy”).id); //1  alert(this.id); //2  alert(jQuery(this).attr(“id”)); //3 }); 方法1使用的是javascript原始方法；方法2用到了this，this就相当于一个...
JavaScript 节点操作 以及DOMDocument属性和方法
12-04
1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6...
JS document内容及样式操作完整示例
01-19
本文实例讲述了JS document内容及样式操作。分享给大家供大家参考，具体如下： <html> <head> <title>js-documnet元素内容和样式操作</title> <meta charset=UTF-8/> [removed] ...
通过js获取div的background-image属性
01-21
之前没有注意过div的background-... 代码如下: ”img_2″ xss=removed xss=removed></div> 在js中想获取image属性 代码如下: document.getElementById(‘img_2’).style.backgroundImage; 注意黑体部分哦，div中的是ba
js中巧用cssText属性批量操作样式
12-10
给一个HTML元素设置css属性，如 代码如下: var head= document.getElementById(“head”); head.style.width = “200px”; head.style.height = “70px”; head.style.display = “block”; 这样写太罗嗦了，为了...
js的document问题
狗
04-09 653
js 的 document对象有两个重要属性，document.body和document.documentElement(注意大写)我曾经用这两个属性获得页面上的代码：docuement.body.innerHTML or outerHTML
JavaScript文档对象模型document对象改变Html表单属性(4)
qq_45308912的博客
11-08 204
1.document对象改变Html表单属性 更改Html元素内容时候可以用innerHtml属性进行修改，但是表单元素只能用value修改元素内容 案例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>点我</button>
DOM-获取DOM元素、修改属性
weixin_46451036的博客
04-08 2207
Web API 基本认知 作用: 就是使用 JS 去操作 html 和浏览器 分类：DOM (文档对象模型)、BOM（浏览器对象模型） DOM树是什么 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系 什么是DOM DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来 操作网.
DOM（二）修改元素内容、属性
商务合作 | 共同学习 | 携手共进
09-22 2万+
JavaScript DOM：修改内容、修改属性，手风琴案例。
js document 常见的属性与方法
hdxx2022的博客
03-27 105
document.images.oImage.src //document.images.name属性.src。document.all.oDiv.style.display="" //图层设置为可视。document.all.oDiv.style.display="none" //图层设置为隐藏。document.images.oImage //document.images.name属性。
操作元素之修改样式属性
leechoy
06-12 617
<!DOCTYPE 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>..
js获取和设置<input>的值
热门推荐
透明大脑
06-26 14万+
Document 获取和设置input的值：value='111' /> window.onload = function(){ var psel = document.getElementById("provSelect1"); alert("获取到的value：" + psel.value+" ,"+$("#provSelect1")
DOM(7)——document的属性、方法
qq_34573534的博客
08-16 935
一、document的属性 document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document 。 二、document的方法： 1、write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车。 <input type="button" value="点击" onclick="d...
js 获取data-id元素的title值
06-01
可以使用如下代码获取data-id元素的title值： ```javascript const dataIdElement = document.querySelector('[data-id]'); const titleValue = dataIdElement.getAttribute('title'); console.log(titleValue); ``` 这里使用了`document.querySelector`方法获取第一个具有`data-id`属性的元素，然后使用`getAttribute`方法获取该元素的`title`属性值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值