用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 ...
随机推荐
- Invoke()的使用
(最近在看协程) Invoke()方法是一种委托机制 Invoke ( "SendMsg", 3 ), 意思是3秒之后调用 SendMsg() 方法 使用时应该注意以下几点: 1. ...
- C# 接口(2)
接口的实现方式. 接口的实现分两种: 1 显示实现接口 2 实现接口. 我们前面所得的接口的实现均为实现接口.也就是第二种方式.那么我们来来看第第一种实现方式: interface IHuman { ...
- NSCalendar日历
前言 NSCalendar 对世界上现存的常用的历法进行了封装,既提供了不同历法的时间信息,又支持日历的计算. NSCalendar -- 日历类,它提供了大部分的日期计算接口,并且允许您在NSDat ...
- 消息中间件ActiveMQ、RabbitMQ、RocketMQ、ZeroMQ、Kafka如何选型?
最近要为公司的消息队列中间件进行选型,市面上相关的开源技术又非常多,如ActiveMQ.RabbitMQ.ZeroMQ.Kafka,还有阿里巴巴的RocketMQ等. 这么多技术,如何进行选型呢? 首 ...
- C++中 栈和队列的使用方法
C++中 栈和队列已经被封装好,我们使用时只需要按照如下步骤调用即可. 1.包含相关的头文件 包含栈头文件: #include<stack> 包含队列头文件: #include<qu ...
- minizip -基于zlib开源代码库
转载:https://www.topomel.com/archives/979.html 一.minizip 是一套用来压缩和解压文件的工具,其基于zlib开源代码库. 开源代码下载链接:http:/ ...
- 20165224 陆艺杰 Exp3 免杀原理与实践
杀软是如何检测出恶意代码的? 识别代码特征码 监测像后门的行为 (2)免杀是做什么? 让后面程序不被安全软件发现 (3)免杀的基本方法有哪些? 多方式编码 半手工shellcode编程 完全自己写没有 ...
- JUC包下CyclicBarrier学习笔记
CyclicBarrier,一个同步辅助类,在API中是这么介绍的: 它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这 ...
- class __init__()
python 先定义函数才能调用 类是客观对象在人脑中的主观映射,生产对象的模板,类相当于盖房的图纸,生产工具的模具 模板 类:属性.方法 __init__() 这个方法一般用于初始化一个类但是 当实 ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...