CSS样式的引用有3种方式:style引用、class引用、id引用,所以js改变元素的样式我们也分3种来说。

1.js改变由style方式引用的样式:
方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";
方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000");

其中,divs是要改变样式元素的name。

2.js改变由class方式引用的样式:
方法一:document.divs.className='divs1';
方法二:document.divs.setAttribute("class","divs1");

其中,divs是要改变样式元素的name。

3.js改变由id方式引用的样式:
方法二:document.divs.setAttribute("id","divs1");

其中,divs是要改变样式元素的name。

例子:

function expand(el)
{
childobj = document.getElementById("child" + el);

if (childobj.style.display == 'none')
{
childobj.style.display = 'block';
}
else
{
childobj.style.display = 'none';
}
return;
}

用JS改变的元素CSS样式,css里display :none 隐藏 block 显示的更多相关文章

  1. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  2. js改变HTML元素的值

    js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h ...

  3. 判断display为隐藏还是显示及获取css

    <html lang="en"> <head> <title>判断display为隐藏还是显示及获取css</title> < ...

  4. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. CSS样式----CSS的继承性和层叠性(图文详解)

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  6. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  7. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  8. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  9. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

随机推荐

  1. 【C++基础 03】do...while(0)妙用

    我的主题是,有时候知道一些细节会让你写出更好的代码. ============================================ 之前学coocs2d-x的时候,发现有非常多do...w ...

  2. Spring Cloud简单入门教程

    原文地址:http://www.cnblogs.com/skyblog/p/5127690.html 按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器 ...

  3. Git使用笔记三

    场景:开源社区提交代码每个人每一个MR只有两个commits,一个是merge前的,一个是merge时候的.因为他们不过是把自己在同一个PR上面提交的commits全部压缩成了一个而已.这个在git上 ...

  4. Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc

    Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc 1. 服务器方面的维护1 1.1. 默认情况下,已经在系统的启动目录下增加了 个启动项目1 1.2. 后台服务.保 ...

  5. java-MapDemo

    Map数据结构的使用 package com.example; import java.util.HashMap; import java.util.Map; /** * MapDemo.java D ...

  6. linux c 和c++ 键盘输入不在控制台显示

    #include <stdio.h>#include <stdlib.h> #define TTY_PATH "/dev/tty"#define STTY_ ...

  7. IOS开发之ZBarReaderView的使用

    IOS开发之ZBarReaderView的使用 HOMEABOUTGUESTBOOKCATEGORIESTAGSLINKSSUBSCRIBE 当开发IOS程序中需要用到二维码识别功能的时候,zbar这 ...

  8. log4cxx日志库RedHat下安装

    今天领导交给我一个任务:把log4cxx库在Redhat系统上面安装起来 首先.我得到信息,安装这个库一共须要三个软件 apr-1.4.6.tar.gz apr-util-1.4.1.tar.gz a ...

  9. hdu1695 GCD2 容斥原理 求x属于[1,b]与y属于[1,d],gcd(x,y)=k的对数。(5,7)与(7,5)看作同一对。

    GCD Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Sub ...

  10. Trailing Zeroes (III) 假设n!后面有x个0.现在要求的是,给定x,要求最小的n; 判断一个n!后面有多少个0,通过n/5+n/25+n/125+...

    /** 题目:Trailing Zeroes (III) 链接:https://vjudge.net/contest/154246#problem/N 题意:假设n!后面有x个0.现在要求的是,给定x ...