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

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

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. 易初大数据 2019年11月7日 spss 王庆超

    许多统计过程也都提供描述性统计指标的输出. (2)描述(D):该过程进行一般性的统计描述.它可以输出均值.均值的标准误.方差.标准差.范围(极差).最大值.最小值.峰度和偏度. (3)探索(E):该过 ...

  2. MySQL原生PHP操作-天龙八步

    <?php //1.第一步[建立连接] $conn = mysqli_connect('localhost','root','123456') or die('数据库连接失败!'); //2.第 ...

  3. MySQL InnoDB MVCC

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  4. 资深架构师Sum的故事：正则！入门就是这样简单

    | 故事背景 职场如战场!Sum带领三个小队友用了两周,成功把代理功能给干出来了.如果说产品经理是最魔鬼的指挥官,那测试就是最魔鬼的教官.这两周,让Sum深深领略了什么是X市的日出. 不过话又说回来, ...

  5. 一 linuk系统简介

    开源软件 使用的自由,绝大多数开源软件免费 研究的自由,可以获得软件源代码 散播及改良的自由,可以自由传播 改良甚至销售 linuk应用领域 基于linuk的企业服务器 扫描踩点网站www.netcr ...

  6. 动手造轮子：实现简单的 EventQueue

    动手造轮子:实现简单的 EventQueue Intro 最近项目里有遇到一些并发的问题,想实现一个队列来将并发的请求一个一个串行处理,可以理解为使用消息队列处理并发问题,之前实现过一个简单的 Eve ...

  7. Redis为什么是单线程、及高并发快的3大原因详解

    Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接.非阻塞 ...

  8. 菜鸟系列Fabric源码学习 — peer节点启动

    Fabric 1.4 源码分析peer节点启动 peer模块采用cobra库来实现cli命令. Cobra提供简单的接口来创建强大的现代化CLI接口,比如git与go工具.Cobra同时也是一个程序, ...

  9. Android最大方法数和解决方案

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/52329035 本文出自: [HansChen的博客] 什么是64K限制和Linear ...

  10. 简单入门Kubernetes

    什么是Kubernetes 官网 https://kubernetes.io/ 中文版:https://kubernetes.io/zh/ 个人理解 基于容器技术 分布式架构 弹性伸缩 隔离物理机 和 ...