Javascript改变CSS样式(局部和全局)
一、局部改变样式
有三种方法:直接改变样式、改变className和改变cssText
改变className: document.getElementById('obj').className="…"
改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";
改变直接样式: document.getElementById('obj').style.backgroundColor="#003366″
二、全局改变样式
通过改变外链样式的的href的值实现网页样式的实时切换,也就是"改变模板风格"。
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
<span onclick="javascript:document.getElementById('css').href='ie.css'">点我改变样式</span>
相关推荐
-
jsp页面中插入css样式的三种方法总结
1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet" type="text/css" href="path/myCss.css"/></head> 2.内部样式 当
-
js获取页面引用的css样式表中的属性值方法(推荐)
如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s
-
js中用cssText设置css样式的简单方法
如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create
-
JS判断移动端访问设备并加载对应CSS样式
JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-
-
用JS动态设置CSS样式常见方法小结(推荐)
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);
-
javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b
-
纯css+js写的一个简单的tab标签页带样式
最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图: 接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b
-
JavaScript动态添加css样式和script标签
[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s
-
Javascript改变CSS样式(局部和全局)
一.局部改变样式 有三种方法:直接改变样式.改变className和改变cssText 改变className: document.getElementById('obj').className="-" 改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;"; 改变直接样式: document.getElementById('obj').s
-
JavaScript改变CSS样式的方法汇总
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式): 改变节点class或id: 写入新的css: 替换页面中的样式表. 个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰.易理解. 后面还会说说如何获取元素的真实样式和一个表单中的注意事项. 1.修改节点style(内联样式) 这种方法权重是最高的,直接写在节点
-
jquery实现动态改变css样式的方法分析
本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个
-
js改变css样式的三种方法推荐
共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s
-
鼠标移入移出改变CSS样式的小例子
网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. 鼠标移入移出改变CSS样式 body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;borde
-
jQuery 改变CSS样式基础代码
其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: 复制代码 代码如下: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法.示
-
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jav
-
详解react的两种动态改变css样式的方法
第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi
-
JavaScript修改css样式style动态改变元素样式
一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl
-
JavaScript修改css样式style
一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl
随机推荐
- VBS 16进制验证特定字符
- Lua判断变量是否为数字、字符串是否可以转换为数字等
- vue.js入门(3)——详解组件通信
- 兼容所有浏览器的js复制插件Zero使用介绍
- JavaScript中的setMilliseconds()方法使用详解
- 浅谈Spring的两种事务定义方式
- python引入导入自定义模块和外部文件的实例
- VS2015 免费插件Refactoring Essentials
- 一步一步学习PHP(6) 面向对象
- 在Python的Django框架中生成CSV文件的方法
- Android编程之SurfaceView学习示例详解
- 简单谈谈MySQL的loose index scan
- mysql免安装制作使用说明
- Windows下的PHP5.0详解
- php版微信公众平台入门教程之开发者认证的方法
- jQuery Datatable 多个查询条件自定义提交事件(推荐)
- EasyUI Pagination 分页的两种做法小结
- 网站关键词标题和网页描述撰写技巧
- Linux使用MySQL忘记root密码及修改MySQL默认编码
- 关于Android中drawable必知的一些规则