JS属性操作

1.属性写操作:添加、替换、修改

元素.属性名=新的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="btn" type="button" value="按钮" />
	</body>
	<script>
		var Obtn = document.getElementById(‘btn‘);
		Obtn.value=‘点击‘;
	</script>
</html>

  

2.属性的读操作:获取、找到元素

元素.属性名

3.innerHTML:读取元素内所有的HTML的内容

.innerHTML=新的值   (修改、替换元素内所有的HTML内容)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<input id="text1" type="text" />
		<input id="btn1" type="button" value="按钮" />
		<p id="p1">这是一些文字</p>

	</body>
	<script>
		window.onload = function (){
			var oBtn = document.getElementById(‘btn1‘);
			var oText = document.getElementById(‘text1‘);
			var oP = document.getElementById(‘p1‘);

			oBtn.onclick = function (){

				oP.innerHTML = oText.value;
			};
		};

	</script>

</html>

  注意:

1.JS中不允许出现‘-’,例如:font-size是错误的写法,fontsize是正确的写法。

2.JS中保留字、关键字:

给元素添加class不能用content.class,应该用content.className,允许把‘.’换成‘[]’,‘.’后面的值无法修改,‘[]’可以随便写。

3.相对路径,innerHTML和颜色值不能拿来做判断。

原文地址:https://www.cnblogs.com/tflicong/p/8375858.html

时间: 2024-10-13 04:13:26

JS属性操作的相关文章

js属性操作(2)

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title> <script>/* HTML 的属性操作:读.写 属性名: 属性值: 读操作:获取.找到 元素.属性名 写操作:"添加?".替换.修改

Js属性操作(3)

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title> <script>/* HTML 的属性操作:读.写 属性名: 属性值: 读操作:获取.找到 元素.属性名 写操作:"添加?".替换.修改

javascript基础——属性操作

HTML 的属性操作:读.写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS属性操作</title> <script> /* HTML 的属性操作:读.写 属性名: 属性值: 读操作:获取.找到 元素.属性名 写操作:“添加”.替换.修改 元素.属性名 = 新的值 */ window.o

js、jquery、h5 类\属性操作的笔记总结

① js操作                                                                   /var div = document.getElementById('d1'); /两种方式不能交换使用,赋值和获取值必须使用用一种方法.var div = document.getElementById("box");//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上,能获取.div.aaaa = "1111&

js基础之js中的HTML属性操作与注意事项

一.js中的HTML属性操作HTML属性操作:读和写: 属性读操作:作用:获取.找到: 语法:元素.属性名 属性写操作:作用:替换.修改: 语法:元素.属性名 = 新的值--->就替换了. innerHTML:读取元素内的所有HTML内容: 语法:元素.innerHTML://读取HTML内容 语法:元素.innerHTML = 新值://修改HTML内 容 /*属性读写操作注意事项*/1.JS中不允许出现“-”例:oDiv.style.fontSize将font-size 中的“-”去掉,si

js学习笔记2---HTML属性操作

1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连接: + 3.属性写操作:(“添加”)替换.修改 a) 语法:元素.属性名 = 新的值 如:document.getElementById(“btn”).value = “嘛呢嘛呢哄~变变变”; 4.元素内容操作:(“添加”)替换.修改 oP.innerHTML           读取元素内的所有

js第一节-js的属性操作

js第一节-js的属性操作 今天我们第一节的内容主要跟大家聊聊js的属性操作,那么什么是属性呢?属性就是对于一个事物的描述,比如一个元素它的id,它的value值等.每个元素都有其自己本有的属性,也有我们给它定义的属性--自定义属性,总之这些都是描述其元素独有特性的.现在呢,我通过两个实例跟大家讲解一下什么是js的属性操作. 一.第一个实例是:图片的轮播图 效果图: 图1:加载的时候 图2:加载之后 HTML代码和CSS代码: JS代码: 上面用到了var oId = document.getE

js的HTML属性操作

<input type="button" id="btn1" value="按钮" /> HTML属性操作:读.写 属性名 属性值 属性都操作:获取.找到 元素.属性 <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function () { var oBt

JS的属性操作(2)

1.点击下拉框选择信息 2.点击按钮,下拉框内选择的信息会自动跳转到文本输入框 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML