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

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

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. Git连接GitHub仓库详解

    [Annotation]本文将从标题八开始,因为前七个标题是关于Git的基本操作,如果对Git的基本操作不了解的话,可以点击下方链接先看一下Git怎么使用. 关于Git的详细使用 八:创建SSH Ke ...

  2. SpringBoot 2.x版本+MultipartFile设置指定文件上传大小

    SpringBoot-versio:2.1.9-RELEASE 由于新版本的SpringBoot已经弃用了如下, 这种方式,提供了新的 配置方案. 这个是官方的介绍 Handling Multipar ...

  3. 银联ISO8583报文解析过程

    主密钥: aabbccddeeff11223344556677889900 1.从签到报文中获取工作密钥,包括MACKEY明文,PINKEY明文 签到: 12-03-31 16:38:09----&g ...

  4. 外行人都能看懂的WebFlux，错过了血亏！

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 本文知识点架构: 如果有关注我公众号文章的同学就会发 ...

  5. PHP 教你使用 Swoole-Tracker 秒级定位 PHP 卡死问题

    PHPer 肯定收到过这样的投诉:小菊花一直在转!你们网站怎么这么卡!当我们线上业务遇到这种卡住(阻塞)的情况,大部分 PHPer 会两眼一抹黑,随后想起那句名言:性能瓶颈都在数据库然后把锅甩给DBA ...

  6. python：类3——魔法方法

    一.魔法方法特点 被双上下滑线包围 魔法方法是面向对象的Python的一切,如果你不知道魔法方法,说明你还没能意识到面向对象的Python的强大(不是说Python脚本) 通过对制定方法的重写,完全可 ...

  7. shell脚本0——”一切皆文件“， 认识Shell

    一.”一切皆文件“与“管道” 1)管道:grep foo /path/to/file | grep -n -k 3 | more 实际过程与我们直观认为的相反,最好通过实际过程理解.首先运行的是mor ...

  8. 防火墙和SELinux

    在/etc/sysconfig/selinux中修改SELINUX=disabled关闭SELinux 执行systemctl disable firewalld关闭防火墙 然后重启计算机

  9. SpringBoot学习（二）—— springboot快速整合spring security组件

    Spring Security 简介 spring security的核心功能为认证(Authentication),授权(Authorization),即认证用户是否能访问该系统,和授权用户可以在系 ...

  10. 理解Redis单线程运行模式

    本文首发于:https://mp.weixin.qq.com/s/je4nqCIq6ARhSV2V5Ymmtg 微信公众号:后端技术指南针 0.概述 通过本文将了解到以下内容: Redis服务器采用单 ...