<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>实例013操作样式</title>

	<style>

		.hello {

			background-color: red;

			font-size: 2cm;

			color: green;

		}

		.hi {

			background-color: pink;

			font-size: 3cm;

			color: yellow;

		}

		.world {

			border:3px solid yellow;

		}

	</style>

</head>

<body>

	<!-- 可以获取样式， 也可以改样式

		一、 可以一个一个样式的改

			对象.style.样式属性=“样式的值”

			样式属性如果有"-"的， 将这个去了， 后面的单词首字母大写

		二、 可以批量的改样式

			使用className这个通用属性（所有元素都可以使用的属性）

			清除样式将className设置为空 -->

	<a id="test1" href="http://www.baidu.com/">百度</a><br>

	<a id="test2" href="http://www.baidu.com/">百度</a><br>

	<a class="hello" id="test3" href="http://www.baidu.com/">百度</a><br>

	<a class="hello" id="test4" href="http://www.baidu.com/">百度</a><br>

	<a class="hello" id="test5" href="http://www.baidu.com/">百度</a><br>

	<input type="button" onclick="change1()" value="改样式1"><br>

	<input type="button" onclick="change2()" value="改样式2"><br>

	<input type="button" onclick="change3()" value="改样式3"><br>

	<input type="button" onclick="change4()" value="改样式4"><br>

	<input type="button" onclick="change5()" value="改样式5"><br>

	<script>

		function change1() {

			var obj = document.getElementById("test1");

			obj.style.color="yellow";

			//样式属性中如果有“——”，将他装换成后面的单词首字母大写

			obj.style.backgroundColor="black";

			obj.style.fontSize="2cm";

		}

		var x = 5;

		var y =5;

		function change2() {

			//点击一下在屏幕中移动一次

			var obj = document.getElementById("test2");

			x += 10;

			y += 10;

			obj.style.position="absolute";

			obj.style.backgroundColor="green";

			obj.style.fontSize="3cm";

			obj.style.left=x+"px";

			obj.style.top=y+"px";

		}

		function change3() {

			//点击切换样式

			var obj = document.getElementById("test3");

			if(obj.className=="hello"){

				obj.className="hi";

			}else {

				obj.className="hello";

			}

		}

		function change4() {

			//清除所有样式

			var obj = document.getElementById("test4");

			obj.className="";

		}

		function change5() {

			//添加样式

			var obj = document.getElementById("test5");

			obj.className+=" world";//注意空格！！！！！！！！！！！！！！！！！

		}

	</script>

</body>

</html>

　　

Example013操作样式的更多相关文章

  1. JavaScript基础插曲—获取标签，插入元素，操作样式

    Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...

  2. JS:操作样式表3：内联和外链样式

    var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

  3. DOM系列---DOM操作样式

    发文不易,若转载传播,请亲注明出处,谢谢! 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有 ...

  4. DOM操作样式表及其兼容性

    DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...

  5. JavaScript编程：使用DOM操作样式表

    6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

  6. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  7. Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  8. JS 操作样式 style

    1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

  9. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

随机推荐

  1. 2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放

    首先我们从java.util.concurrent.locks包中的AbstraceQueuedSynchronizer说起,在下文中称为AQS. AQS是一个用于构建锁和同步器的框架.例如在并发包中 ...

  2. 深入理解Struts2----数据校验

    在表现层的数据处理方面主要分为两种类型,一种是类型转换,这点我们上篇已经简单介绍过,另外一种则是我们本篇文章将要介绍的:数据校验.对于我们的web应用,我们经常需要和用户进行交互收集用户信息,那么无论 ...

  3. Bootstrap学习笔记之文本对齐风格

    文本对齐风格 在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑   ...

  4. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  5. html学习笔记 - 特殊字符

  6. php的八大数据类型

    1. 八大数据: bool 布尔类型:0,1:真假 integer 整形 float 浮点型 string 字符串 array 数组 object 对象,类,class resource 文件,图片, ...

  7. 基于Android的上课助手的概况及第一周冲刺详情

    基于Android平台的上课助手 一.       功能简介 课表查询 课程提醒 空闲教室的查询 二.       开发环境 Android 三.       开发成员 组长:李志岩 成员:王亚蕊.孙 ...

  8. 开涛spring3(9.4) - Spring的事务 之 9.4 声明式事务

    9.4  声明式事务 9.4.1  声明式事务概述 从上节编程式实现事务管理可以深刻体会到编程式事务的痛苦,即使通过代理配置方式也是不小的工作量. 本节将介绍声明式事务支持,使用该方式后最大的获益是简 ...

  9. java虚拟机学习-JVM调优总结-垃圾回收面临的问题（8）

    如何区分垃圾 上面说到的“引用计数”法,通过统计控制生成对象和删除对象时的引用数来判断.垃圾回收程序收集计数为0的对象即可.但是这种方法无法解决循环引用.所以,后来实现的垃圾判断算法中,都是从程序运行 ...

  10. axis2 和 xfire 接口调用问题排查

    背景: 1个运营商厂家开发人员离职,我们为了上线对接接口,迁就对方客户端调用.对方客户端框架用的是xfire.调用方式基本为:   Service serviceModel = new ObjectS ...