Javascript通过控制类名更改样式
控制类名(className 属性)
className 属性设置或返回元素的class 属性。
语法:
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>className属性</title> <style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
js控制随机数生成概率代码实例
基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 具体内容如下,供大家参考 'use strict'; export default class GL { /** * 构造函数 * @param {object} opt * @param {number} opt.min 最小整数值 * @param {number} opt.max 最大整数值 * @param {Map} opt.fenpei 自定义概率 */ constructor({ min, ma
-
js实现通过开始结束控制的计时器
本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下 时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加. 开始结束运用addEventlistener()来控制开始结束, 实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果. 不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同
-
Javascript通过控制类名更改样式
控制类名(className 属性) className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; char
-
javascript轻松控制表格列样式的脚本代码
第一列 第二列 第3列 第一列 第二列 第3列 var obj=document.getElementById("tab").getElementsByTagName("TD") var n=3;//列数 for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
如何用JavaScript实现动态修改CSS样式表
看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu
-
JavaScript+CSS控制打印格式示例介绍
1. 用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式,表示打印时该样式才起作用 复制代码 代码如下: <link href="/style/print.css" rel="stylesheet" type="text/css" media="print"> /style/print.css文件 复制代码 代码如下: .nopr
-
Vue2.0点击切换类名改变样式的方法
1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
-
javascript获取元素的计算样式
背景 使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如 <div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用li
-
JavaScript实现控制打开文件另存为对话框的方法
本文实例讲述了JavaScript实现控制打开文件另存为对话框的方法.分享给大家供大家参考.具体如下: 这里通过JS打开图片另存为对话框,提示用户保存文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator&
-
JavaScript操作class和style样式代码详解
废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l
-
浅谈JavaScript 覆盖原型以及更改原型
覆盖原型 //囚犯示例 //1.定义原型对象 var proto = { sentence : 4, //监禁年限 probation: 2 //缓刑年限 }; //2.定义原型对象的构造函数 var Prisoner = function(name, id) { this.name = name; this.id = id; }; //3.将构造函数关联到原型 Prisoner.prototype = proto; //4.实例化对象--采用工厂函数实例化对象 var makePrisoner
-
JavaScript每天定时更换皮肤样式的方法
本文实例讲述了JavaScript每天定时更换皮肤样式的方法.分享给大家供大家参考.具体分析如下: 这段js代码通过每天在不同时段自动更换网页调用的样式表,实现更换皮肤的功能. <script type="text/JavaScript"> <!-- function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&¤tTi
随机推荐
- mysql 5.7.20解压版安装方法步骤详解(两种方法)
- PHP实现打包下载文件的方法示例
- Vuex之理解Getters的用法实例
- 实例讲解Java设计模式编程中的OCP开闭原则
- Java 关键字 volatile 的理解与正确使用
- 登录oracle数据库时密码忘记的解决方法
- Thinkphp中import的几个用法详细介绍
- 利用Go语言初步搭建一个web应用的教程
- C# XML序列化方法及常用特性总结分析
- MySQL essential版本和普通版本有什么区别?
- mysql5.7.19 zip 详细安装过程和配置
- 第一次接触神奇的Bootstrap表单
- java实现二维码生成的几个方法(推荐)
- 使用node.js对音视频文件加密的实例代码
- 一个超简单的jQuery回调函数例子(分享)
- 用jquery实现学校的校历(asp.net+jquery ui 1.72)
- 解决webpack -p压缩打包react报语法错误的方法
- C++ 中滚动条的滚动问题
- php获取给定日期相差天数的方法分析
- Python3网络爬虫之使用User Agent和代理IP隐藏身份