有俩种方式操作结点的属性。

首先我们需要先获取所要操作的结点元素：

var uname=document.getElementById("uname");

var gan=uname.getAttribute("value");

var gat=uname.getAttribute("type");

俩种方法获取结点元素，根据获取的结点元素，在去操作元素的属性。

//操作属性的方式一

uname.type="button";

//操作元素的属性方式二

uname.setAttribute("value","狗蛋")

操作元素结点的样式:

还是一样：先获取元素，再去操作样式：

<script>

	var dv=document.getElementById("div1");

</script>
	function demo1(){	

		var h=dv.style.height;

		var w=dv.style.width;

		var bc=dv.style.backgroundColor;

		alert(bc+"__"+h+"__"+w);

		}

	function demo2(){

		dv.className="div2";

		dv.style.height="300px";

		dv.style.width="300px";

		dv.style.backgroundColor="red";

	    }

<style type="text/css">

			.div2{

				border: 5px solid cornflowerblue;

			}

		</style>

操作样式有俩种：一种是更改，还有一种是添加，添加我们就用到了className这个属性。

最后附上俩篇的完整源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>04DOM中操作结点的属性</title>

		<script type="text/javascript">

			function show(){

				var uname=document.getElementById("uname");

				var va=uname.value;

				var ty=uname.type;

				var na=uname.name;

				//alert(va+"--"+ty+"--"+na);

				//操作属性的方式一

				uname.type="button";

				//获得元素属性(默认值)

				var gan=uname.getAttribute("value");

				var gat=uname.getAttribute("type");

				//操作元素的属性方式二

				uname.setAttribute("value","狗蛋")

				//alert(gan+"****"+gat);

			}

		</script>

	</head>

	<body>

		<p>

			<input type="text" id="uname" value="张三" name="uname" />

		</p>

		<p>

			<input type="button" id="" value="展示信息" οnclick="show()" />

		</p>

	</body>

</html>


<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>05DOM中操作元素结点的样式</title>

		<script>

			function demo1(){

				var h=dv.style.height;

				var w=dv.style.width;

				var bc=dv.style.backgroundColor;

				alert(bc+"__"+h+"__"+w);

			}

			function demo2(){

				dv.className="div2";

				dv.style.height="300px";

				dv.style.width="300px";

				dv.style.backgroundColor="red";

			}

		</script>

		<style type="text/css">

			.div2{

				border: 5px solid cornflowerblue;

			}

		</style>

	</head>

	<body>

		<div id="div1" style="background-color: aquamarine; width: 200px; height: 200px;"></div>

		<p>

			<input type="button" name="" id="" value="显示div的属性" οnclick="demo1()"/>

		</p>

		<p>

			<input type="button" id="" value="改名div属性" οnclick="demo2()"/>

		</p>

		<script>

			var dv=document.getElementById("div1");

		</script>

	</body>

</html>

DOM中操作结点的属性_操作元素结点的样式的更多相关文章

  1. DOM中XMLDOMnodelist的length属性的表示是：（选择1项）

    DOM中XMLDOMnodelist的length属性的表示是:(选择1项) A. 该对象中文本字符的长度 B. 该对象中元素节点的数量 C. 该对象中节点的数量 D. 该对象中文档对象的数量 解答: ...

  2. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

  3. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  4. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  5. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  6. HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题

    <html> <head> <title>HTML示例</title> <style type="text/css"> ...

  7. 在vue中scss通过scoped属性设置局部变量如何设置框架样式

    应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...

  8. vue通过属性绑定为元素设置class样式

    第一种方式,直接传递一个数组,注意使用v-bind绑定             <h1 :class="['red','size'">这是一个h1文本</h1&g ...

  9. DOM 中 Property 和 Attribute 的区别

    原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...

随机推荐

  1. layaair和egret的区别

    egret缺点1 编译速度非常慢 2 就是强类型转换非常的麻烦 3 只能用ts 所以只能用他们的IDE 不能用sublime layaair唯一不足的就是 insepct太垃圾 占用游戏界面 所以建议 ...

  2. PHP Laravel5实现的RBAC权限管理操作示例

    根据不同的权限,在菜单栏显示不同的功能,只对菜单进行了限制,若对路由也进行限制,可以根据菜单的例子,请自行完善,开发.下面请认真学习一下laravel的RBAC设计 1.建表(用户表.角色表.权限表. ...

  3. 给大家整理了几个开源免费的 Spring Boot + Vue 学习资料

    最近抽空在整理前面的文章案例啥的,顺便把手上的几个 Spring Boot + Vue 的学习资料推荐给各位小伙伴.这些案例有知识点的讲解,也有项目实战,正在做这一块的小伙伴们可以收藏下. 案例学习 ...

  4. Spring Cloud Alibaba（四）实现Dubbo服务消费

    本项目演示如何使用 Spring Cloud Alibaba 完成 Dubbo 的RPC调用. Spring Cloud与Dubbo Spring Cloud是一套完整的微服务架构方案 Dubbo是国 ...

  5. Spring基于注解的配置1——@Required、@Autowired、@Qualifier示例及与传统注入方法的对比

    @Required注释 作用:用于属性的set方法,那么这个属性必须在xml文件的bean标签里面进行配置,否则就会抛出一个BeanInitializationException异常. 首先准备一个类 ...

  6. webpack-dev-middleware 和 webpack-hot-middleware 配置开发环境和生产环境；webpack脚手架；仿vue-cli

    webpack-dev-server更新后自带express服务器,已经不需要自己搭建.vue-cli从17年底左右也换成了最新的webpack-dev-server,而不是用webpack-dev- ...

  7. Spring中常见的设计模式——原型模式

    1.原型模式应用场景 当遇到大量耗费劳动力的 get,set赋值场景时,如下: public class SetGetParam { public void setParam(UserDto user ...

  8. 【Luogu P1631】序列合并

    Luogu P1631 题意很好懂,不作分析 很容易想出一个解法是求出每一个和,排序后取前n个. 当然这种做法妥妥的会MLE+TLE 我们会发现实质上这种做法的缺点在于存入了大量不需要的数据. 那么该 ...

  9. 02_Pandas基本使用

    1.Pandas读取数据 一般错误 import pandas as pd pd.read_csv(r'D:\数据分析\02_Pandas\pandas\food_info.csv') out: -- ...

  10. 【Python3爬虫】网络小说更好看？十四万条书籍信息告诉你

    一.前言简述 因为最近微信读书出了网页版,加上自己也在闲暇的时候看了两本书,不禁好奇什么样的书更受欢迎,哪位作者又更受读者喜欢呢?话不多说,爬一下就能有个了解了. 二.页面分析 首先打开微信读书:ht ...