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

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

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. Scrapy进阶知识点总结（六）——中间件详解

    概述 查看scrapy官网的框架图,可以看出中间件处于几大主要组件之间,类似于生产流水线上的加工过程,将原料按照不同需求与功能加工成成品 其中4,5处于下载器与引擎之间的就是下载中间件,而spider ...

  2. ARP协议字段解读

    Hardware type : 硬件类型,识别链路层协议 Protocol type : 协议类型,标识网络层协议 Hardware size : 硬件地址大小,标识MAC地址长度,这里是6个字节(4 ...

  3. 7月22 Linux作业-文件管理

    习题内容 解答 1.答案 [root@centos7 ~]# echo '*/1 * * * * /usr/bin/cp /etc /data/`/usr/bin/date +\%Y-\%m-\%d` ...

  4. requests模块使用代理

    1.创建try_proxies.py文件import requestsproxies = {"http":"http:117.135.34.6:8060"}he ...

  5. 搭建Redis三主三从集群

    Redis三主三从集群规划 10.0.128.19   使用端口 7000  7001 10.0.128.22   使用端口 7002  7003 10.0.128.23   使用端口 7004  7 ...

  6. linux文件时间

    Linux 查看文件修改时间(精确到秒)(简单) ls --full-time 查看文件时间戳命令:stat test.txt linux 下查看文件修改时间 等(详细) 查看文件时间戳命令:stat ...

  7. Qt Framework 问题之 framework/Versions/A:bundle format unrecognized, invalid, or unsuitable

    在解决标题提到的问题之后,先来介绍下Qt Framework一些基本知识. 基于QT的Mac端工程,在打包时需要对所有需要嵌入到APP的framework及dylib文件进行手动签名处理. 一.签名处 ...

  8. 结合源码，重温 Android View 的事件处理知多少 ?

    前言 Android View 的 事件处理在我们的编程中,可谓是无处不在了.但对于大多数人而言,一直都是简单的使用,对其原理缺乏深入地认识. 学 Android 有一段时间了,最近发现,很多基础知识 ...

  9. [Part 1] Ubuntu 16.04安装和配置QT5 | Part-1: Install and Configure Qt5 on Ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/91842b71/,欢迎阅读! Part-1: Install and Configure Qt5 on Ubuntu 16.04 ...

  10. selenium中延时等待三种方式

    selenium中的延时等待方式有三种:强制等待:sleep()  隐示等待:implicitly_wait()  显示等待 WebDriverWait() 1.强制等待:sleep(),time模块 ...