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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现通过开始结束控制的计时器

    本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下 时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加. 开始结束运用addEventlistener()来控制开始结束, 实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果. 不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同

  • 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

  • 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&&currentTi

随机推荐