用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 ...
随机推荐
- linux 建议锁和强制锁
作为APUE 14.3节的参考 linux是有强制锁的,但是默认不开启.想让linux支持强制性锁,不但在mount的时候需要加上-o mand,而且对要加锁的文件也需要设置相关权限. . ...
- Jmeter_实现Excel文件导出到本地
一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...
- 5.EM
- MongoDB集群配置笔记
firewall-cmd --query-port=27017/tcp yum install system-config-firewall-tui firewall-cmd --zone=publi ...
- 「模拟赛20190327」 第二题 DP+决策单调性优化
题目描述 小火车虽然很穷,但是他还是得送礼物给妹子,所以他前往了二次元寻找不需要钱的礼物. 小火车准备玩玩二次元的游戏,游戏当然是在一个二维网格中展开的,网格大小是\(n\times m\)的,某些格 ...
- opencv学习笔记(四)--图像平滑处理
图像平滑处理的几种常用方法: 均值滤波 归一化滤波 高斯模糊 中值滤波 平滑处理(模糊)的主要目的是去燥声: 不同的处理方式适合不同的噪声图像,其中高斯模糊最常用. 其实最重要的是对图像卷积的核的理解 ...
- opencv学习笔记3——图像缩放，翻转和阈值分割
#图像的缩放操作 #cv.resize(src,dsize,dst=None,,fx=None,fy=None,interpolation=None) #src->原图像,dsize->目 ...
- C++20草案中的宇宙飞船运算符(<=>,spaceship operator)
C++20草案中的宇宙飞船运算符(<=>,spaceship operator) Herb Sutter提议的新三路运算符<=>已经被合入C++20草案中. 宇宙飞船运算符(h ...
- SDUT OJ 数据结构实验之排序八：快速排序
数据结构实验之排序八:快速排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 给定N ...
- 品味ZooKeeper之Watcher机制_2
品味ZooKeeper之Watcher机制 本文思维导图如下: 前言 Watcher机制是zookeeper最重要三大特性数据节点Znode+Watcher机制+ACL权限控制中的其中一个,它是zk很 ...