用js语句控制css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">博客园</div>
<input type="button" value="变大" onclick="big()">
<input type="button" value="变色" onclick="color()"> <script>
function big() {
var ele=document.getElementById("div1"); // 先导航到要改的标签
ele.style.fontSize="80px"; // 用style.里的方法去改变属性参数
}
function color() {
var ele=document.getElementById("div1"); // 同上
ele.style.color="red";
} </script>
</body>
</html> ================================== 注: 如果是大公司共同开发代码时,css可能是美工完成的 直接改别人的代码方法不可取 ===================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class1{
color: #48f444;
}
.big{
font-size: 90px;
color: #0000cc;
}
.small{
font-size: 30px;
color: red;
} </style>
</head>
<body>
<div id="div1" class="class1"> 博 客 园 !!</div>
<input type="button" value="变大" onclick="change('big')"> // 指定传的参数就是要添加的css的样式名
<input type="button" value="变小" onclick="change('small')">
<script>
function change(css) { // 因为功能一样 所以只用一个函数完成,使用参数
var ele=document.getElementById("div1"); // 通过ID找到标签
ele.classList.add(css) // 在标签的class list里用此方法添加 css
}
</script>
</body>
</html>
================================== 注:此方法是通过添加已有的未引用的样式表到标签中去 ==============================================
用js语句控制css样式的更多相关文章
- jQuery控制CSS样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- js如何控制css伪元素内容（before，after）
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 5、通过js代码设置css样式
1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 通过js获取外部css样式
通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...
随机推荐
- Qt中QBitmap 的使用 --QBitmap的作用
特别注意:如果想把做一个先把图画在内存中,在显示到页面,不要使用bitmap,这个只有单色: 一般情况下QBitmap只作为图片掩码使用,比如做不规则窗口. QBitmap表示一种只有黑白的单色图片, ...
- jsonp的原理及其使用
原理: 1.创建script标签 2.src远程地址 3.返回的数据必须为js格式 1.因为浏览器处于安全原因不允许跨域请求,但是允许跨域倒入js文件,所以需要创建script标签 2.src远程地址 ...
- spring boot 第一个Dome
1.创建Maven项目 按照下面的步骤 项目创建完成后的目录结构 2. 参照Spring boot官方文档修改pom.xml 修改 maven编译的jdk版本 将spring boot设置为 pare ...
- winform列标题高度无法改变
datagridview行为里把ColumnHeadersHeightSizeMode属性设置为EnableResizing 但好像会导致横向滚动条从底部跑到了中间,还不知道这个BUG的原因,将Col ...
- loj #2013. 「SCOI2016」幸运数字
#2013. 「SCOI2016」幸运数字 题目描述 A 国共有 n nn 座城市,这些城市由 n−1 n - 1n−1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以 ...
- iOS 开发之 GCD 不同场景使用
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- samba服务器架设
#samba服务器架设方便线上linux服务器和windows服务器之间共享 1.关闭防火墙service iptables stop 2.关闭SELinuxsetenforce 0 3.安装samb ...
- Spring核心--IOC&AOP
Ioc(控制反转) 所谓的控制反转就是应用本身不负责依赖对象的创建及维护,依赖对象的创建及维护是由外部容器负责的.这样控制权就由应用转移到了外部容器,控制权的转移就是所谓反转. AOP(面向切面编程) ...
- 【BZOJ1053】[HAOI2007]反素数 （搜索+数论）
\([POI2002][HAOI2007]\)反素数 题目描述 对于任何正整数x,其约数的个数记作\(g(x)\).例如\(g(1)=1.g(6)=4\). 如果某个正整数x满足:\(g(x)> ...
- python基础03-循环结构及函数基础
循环结构及函数基础 循环结构(for-in) 说明:也是循环结构的一种,经常用于遍历字符串.列表,元组,字典等 格式: for x in y: 循环体 执行流程:x依次表示y中的一个元素,遍历完所有元 ...