<!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. cgroup原理简析:vfs文件系统

    要了解cgroup实现原理,必须先了解下vfs(虚拟文件系统).因为cgroup通过vfs向用户层提供接口,用户层通过挂载,创建目录,读写文件的方式与cgroup交互.因为是介绍cgroup的文章,因 ...

  2. Java 多线程详解（四）------生产者和消费者

    Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...

  3. SpringMVC + spring3.1.1 + hibernate4.1.0 集成及常见问题总结

    下载地址: http://pan.baidu.com/s/1qWDinyk 一 开发环境 1.动态web工程 2.部分依赖 hibernate-release-4.1.0.Final.zip hibe ...

  4. 中文分词中的战斗机-jieba库

    英文分词的第三方库NLTK不错,中文分词工具也有很多(盘古分词.Yaha分词.Jieba分词等).但是从加载自定义字典.多线程.自动匹配新词等方面来看. 大jieba确实是中文分词中的战斗机. 请随意 ...

  5. ECS_8080端口连接拒绝问题排查

    原文链接 用户ECS网络设置 上图是用户ECS的网络示意图: ecs处于vpc网络下 ecs加入了一个安全组,该安全组出入方向均开放8080端口 ecs有两个网卡,一个私网主网卡(有虚线的网卡),一个 ...

  6. javascript中break和continue的区别

    1.break:跳出循环. 2.continue:跳过循环中的一个迭代.(迭代:重复反馈过程的滑动,其目的是为了逼近所需目标或结果.每一次对过程的重复称为一次"迭代",而每一次迭代 ...

  7. 将 FFmpeg 移植到 Android平台 (完整版)

    首先需要去FFmpeg的官网http://www.ffmpeg.org/去下载FFmpeg的源码,目前的版本号为FFmpeg3.3(Hilbert). 下载的文件为压缩包,解压后得到ffmpeg-3. ...

  8. Eclipse导入项目常见问题----乱码问题03

    有时打开导入的项目文件时,会出现如下图情况: 解决方法 如下图步骤所示: 此时,我们可以看到文件正常了 jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37 ...

  9. mac下sublime text3 安装px转rem插件

    本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...

  10. 向EXECL文件中导入数据的同时插入图片

    因为项目需要在导出数据到EXECL文档的同时还需要导出图片进去,在处理是遇到的一些问题,在此记录一下. 首先代码写好之后放测试服务器上去执行的时候报错了,报检索 COM 类工厂中 CLSID 为 {0 ...