用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 ...
随机推荐
- ubuntu14.10，解决按照最新版Gnome 15.10后，经典Gnome桌面字体问题！
ubuntu14.10刚安装完毕,我首先按照了经典Gnome桌面,随后我发现ubuntu软件中心里面能找到的软件明显不如先前我安装过的ubuntu了,我觉得有可能是因为我以前安装的ubuntu14.1 ...
- java 文件硬盘存取 练习
读写文件操作 对字符流文件读写 1 写文件 FileOutputStream 节点类 负责写字节 OutputStreamWriter 转化类 负责字节到字符转换 BufferedWriter 装饰 ...
- python操作RabbitMQ、Redis、Memcache、SQLAlchemy
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- selenium+PhantomJS简单爬虫
#!/usr/bin/env python # -*- coding: utf-8 -*- ''' Created on 2017年10月19日 @author: zzy ''' import tim ...
- 老男孩Day17作业：后台管理平台编辑表格
一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...
- php中的各种header整理
<?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...
- 把查询的结果组织为一串字符(eg:板板鞋,兵乓球,篮球,足球)
--把查询的结果组织为一串字符(板板鞋,兵乓球,篮球,足球) drop table a create table a( name varchar(20)) insert into a select ' ...
- Spring学习笔记（五）—— Spring整合JDBC
一.Spring对JDBC的支持 Spring提供了很多模板整合Dao技术 与JDBC的整合中,Spring中提供了一个可以操作数据库的对象——JdbcTemplate,该对象封装了JDBC技术,与D ...
- 一款不错的Linux终端颜色设置
PS1="\[\e[37;40m\][\[\e[32;40m\]\u\[\e[37;40m\]@\h \[\e[36;40m\]\w\[\e[0m\]]\\$ " #步骤# vi ...
- D3.js v4版本 按住shift键框选节点demo
http://download.csdn.net/download/qq_25042329/10139649