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. Python中json.loads解析包含\n的字符串会出错

    用python中的json.loads解析字符串,失败了. [解决过程] 1.调试了半天,终于发现,如果把其中的: "呵呵加那么多连接啊\n\n这个标准还是不错的\n\n给大家推荐一个更多的 ...

  2. TensorFlow学习笔记 速记1——tf.nn.dropout

    tf.nn.dropout(x, keep_prob, noise_shape=None, seed=None,name=None)  上面方法中常用的是前两个参数: 第一个参数 x:指输入: 第二个 ...

  3. sqlserver获取当月、年的第一天和最后一天

    -- 当月第一天select dateadd(month, datediff(month, 0, getdate()), 0) -- 当月最后一天(思路:下月的第一天减去一天)select datea ...

  4. 谈谈 OC 中的内联函数

    内联函数 即在编译的时候将函数体替换函数调用.从而不须要将parameter,returnaddress进行push/pop stack的操作, 从而加速app的执行.然而,会添加二进制文件的大小. ...

  5. Stage3D&Away3D整理ppt

    资料下载地址:http://files.cnblogs.com/xignzou/away3D%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0%E5%88%86%E4%BA%AB ...

  6. 转:C++ 关键字 inline详细介绍

    1.  内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: int max(int a, int b) { return a > b ? a : b; } 为这么一个小的操作定义一个 ...

  7. 【Mac + Python3.6 + ATX基于facebook-wda】之IOS自动化(二):安装facebook-wda库并编写简易自动化测试脚本

    上一篇介绍完如何安装WDA,接下来开始正式安装开发库并编写自动化脚本. 目录: 一.安装facebook-wda库 二.通过WEditor定位元素 三.附录:学习资料 一.安装facebook-wda ...

  8. 深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念

    本篇文章是对单一入口.MVC.ORM.CURD.ActiveRecord概念进行了详细的分析介绍,需要的朋友参考下     MVC MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使 ...

  9. Web应用程序使用Hibernate

    在本文中,我们将学习使用hibernate创建一个Web应用程序. 对于创建Web应用程序,我们使用JSP表示逻辑层,使用Bean类表示数据,以及使用DAO类操作数据库.在hibernate中创建简单 ...

  10. Spring MVC多动作控制器

    以下示例演示如何使用Spring Web MVC框架的多动作控制器. MultiActionController类用于在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 - package ...