Example013操作样式
<!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操作样式的更多相关文章
- JavaScript基础插曲—获取标签,插入元素,操作样式
Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...
- JS:操作样式表3:内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- DOM系列---DOM操作样式
发文不易,若转载传播,请亲注明出处,谢谢! 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有 ...
- DOM操作样式表及其兼容性
DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...
- JavaScript编程:使用DOM操作样式表
6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
- JS 操作样式 style
1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
随机推荐
- Jenkins+Tomcat+svn+maven自动化构建简单过程
搭建好jenkins自动化构建之后,点击立即构建,即可将svn服务器上的源码自动编译构建,并打成war包,然后将这个war包以及编译好的项目复制到指定服务器的tomcat容器里,当svn服务器的代码有 ...
- HTML head头部标签总结
HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...
- VR全景智慧城市-梦幻城市降临
有人说,创业分为两种,一种是富创业,一种是穷创业! 什么是富创业呢?就是拿钱砸,我觉得这种说法有点荒唐,为什么创业,因为没钱才会去创业,有钱的那不叫创业的,那是拿钱投资点项目. 看看老一辈的富豪,不都 ...
- 关于关系型数据库(MySQL)的一些概念
主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...
- Python3.5 在Ubuntu16.04上无法画图的解决方案
1. 问题由来 在使用下面的测试代码学习python时,用Pycharm画不出来图像,SPYDER3 可以画出来. 下面的代码来自:http://old.sebug.net/ # -*- coding ...
- Hibernate学习笔记三:对象关系映射(一对一,一对多,多对一,多对多)
如需转载,请说明出处:http://www.cnblogs.com/gudu1/p/6895610.html Hibernate通过关系映射来表示数据库中表与表之间的关系,关系映射可以通过两种方式:配 ...
- 《JAVA与模式》之简单工厂模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述简单工厂模式的:简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂 ...
- C# set get 函数 属性访问器
属性访问器 拿东西就是Get,放东西就是Setprivate string namepublic String Name{set{name = value;}get{return name;}}ge ...
- git reset、git checkout和git revert的区别
这三个git命令都是用来撤销代码仓库中的某些更改,而前两个命令不仅可以作用于commit层面,还可以作用于file层面Reset在commit层面,reset通过移除当前分支的一些节点来实现版本回滚; ...
- 【Python之基本数据类型 基本运算】
一.基本数据类型 1.字符串 类:str 方法:选中str,按住command(ctrl)+左键跳转至对应的方法 字符串常用方法归纳如下: 1)capitalize 功能:实现字符串首字母大写,自身不 ...