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

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

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. spring security 简单入门

    spring security 简单入门示例 一.概述 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架 . 其中最主要的安全操作有两 ...

  2. 列转行pivot函数在SQL Sever里面和Oracle里面的用法区别

    首先pivot是一个列转行的函数,反向用是unpivot(行转列). 在SQL sever中可以这么写 SELECT * FROM [TABLE] /*数据源*/ AS A PIVOT ( MAX/* ...

  3. PHP导出成PDF你用哪个插件

    准备工作 首先查询了相关的类库,有FPDF,zendPDF,TcPDF等等.首先看了下先选择了FPDF,可以说除了中文字符以外没有什么问题,中文乱码而且看了下最新版本没有很好的解决方案,所以只能放弃. ...

  4. Salesforce学习之路（十）Org的命名空间

    1. 命名空间的适用场景 每个组件都是命名空间的一部分,如果Org中设置了命名空间前缀,那么需使用该命名空间访问组件.否则,使用默认命名空间访问组件,系统默认的命名空间为“c”. 如果Org没有创建命 ...

  5. SpringBoot 源码解析 （六）----- Spring Boot的核心能力 - 内置Servlet容器源码分析（Tomcat）

    Spring Boot默认使用Tomcat作为嵌入式的Servlet容器,只要引入了spring-boot-start-web依赖,则默认是用Tomcat作为Servlet容器: <depend ...

  6. IDEA+SpringBoot+Mybatis+maven分布式项目框架的搭建

    参考文章:https://blog.csdn.net/qq_34410726/article/details/98214992 一.maven分布式工程的基本架构 demo  #父工程模块,主要用来定 ...

  7. libdispatch.dylib中dispatch_group的实现

    semaphore和group都是libdispatch提供的基于信号量的同步机制,dispatch_group继承自dispatch_semaphore,使用libdispatch层的信号量算法.d ...

  8. JPA中使用@Query注解多表联查

    原生SQL: select `user`.id, `user`.`name`,dept.name deptName,sum(sd.score) SumScore from `user` LEFT JO ...

  9. Centos7編譯安裝LAMP平臺

    什麽是LAMP? 拆開看 L 就是Linux系統 A是Apache的縮寫 M.P則是MySQL和PHP的简写. 其实就是把Apache, MySQL以及PHP安装在Linux系统上,组成一个环境来运行 ...

  10. Vue学习笔记:Vuex

    为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...