<!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. myeclipse10.7安装git插件

    如果想把github上的一些开源项目导入到myeclipse中,一种方法是从github网站上将开源项目下载下来,另一种是使用myeclipse的egit插件直接从github网站上down下来,下面 ...

  2. JAVA中线程的状态

    java thread的运行周期中, 有几种状态, 在 java.lang.Thread.State 中有详细定义和说明: NEW:至今尚未启动的线程的状态. RUNNABLE:可运行线程的线程状态. ...

  3. python 冒泡排序，递归

    冒泡排序:li = [33, 55, 58, 66, 58, 555,20000000000000000000000, 5555,5555, 5, 6, 62,1]for i in range(1,l ...

  4. 张高兴的 Windows 10 IoT 开发笔记：使用 ADS1115 读取模拟信号

    考虑到 Raspberry Pi 读取模拟信号是很烦人的事情,更何况是在没人玩的 Windows 10 IoT 下,所以准备正儿八经的写点东西. 需求:使用 Raspberry Pi 读取输出模拟信号 ...

  5. JSP servlet的配置与使用

    1. servlet 的配置文件内容如下所示 <servlet>     <description>This is the description of my J2EE com ...

  6. URI结构

    [scheme:][//host:port][path][?query][#fragment] path:从端口后第一个/开始,可以有多个,每个用/连接. query:从第一个?开始,至行尾或#结束. ...

  7. Qt Opencv 在Linux下摄像头简单示例（转）

    下面写的文章也许网上也有类似的,但是大多数都没有给出思路及背景,让初学者每次都只能学到一点皮毛,不少知识需要大量搜索零碎地拼凑起来.题外话,虽然现在是碎片化信息时代,但正是这样信息整合能力也显得非常重 ...

  8. [原创]MongoDB_Sharding

    Mongo Sharding:本示例搭建了三个副本集作为三个分片的sharding集群,其中master,slave,factershi三台同网段的内网主机.前期规划和原理分析省略,可根据具体配置推导 ...

  9. Spring Boot 负载均衡之外置session状态保存

    在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而打到另外一台服务器的时候,session丢失. 常规的解决方 ...

  10. 微信小程序封装http访问网络库实例代码

    之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...