<!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. 关于关系型数据库（MySQL）的一些概念

    主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...

  2. .Net程序员学用Oracle系列(10)：系统函数（中）

    1.四大转换函数 1.1.TO_CHAR 1.2.TO_NUMBER 1.3.TO_DATE 1.4.CAST 2.两大近似值函数 2.1.ROUND 2.2.TRUNC 3.正则函数 3.1.正则函 ...

  3. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  4. [原创]MongoDB综合实例一

    CentOS-6.5单机实现mongoDB分片 环境:1)CentOS 6.5系统      2)IP:本机3)MongoDB:MongoDB-linux-x86_64-2.6.1 实现:两个副本集s ...

  5. iOS安全攻防之越狱设备检测

    iOS 越狱(iOS Jailbreaking),是用于获取苹果公司便携装置操作系统iOS最高权限的一种技术手段,用户使用这种技术及软件可以获取到 iOS 的最高权限,甚至可能可以进一步解开运营商对手 ...

  6. js文件下载及命名（兼容多浏览器）

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...

  7. 02-2--数据库MySQL：DDL（Data Definition Language：数据库定义语言）操作数据库中的表（二）

    DDL对数据库的操作:http://blog.csdn.net/baidu_37107022/article/details/72334560 DDL对数据库中表的操作 1)方法概览 2)演示 //创 ...

  8. 史上最完整Hadoop2.x完全分布式安装部署-小白也能学会

    一.环境要求: 1.        虚拟机安装并设置网络: 2.        修改主机地址映射: 3.        必备软件:Jdk.Development Tools   Development ...

  9. git上传本地项目到github

    git软件下载地址:https://git-scm.com/download/ 1. 在GitHub上建立项目登录GitHub后,你可以在右边靠中那里找到一个按钮“New Repository”,点击 ...

  10. 软件raid 5

    软件raid 5的实现 RAID 5 是一种存储性能.数据安全和存储成本兼顾的存储解决方案. RAID 5可以理解为是RAID 0和RAID 1的折中方案.RAID 5可以为系统提供数据安全保障,但保 ...