1 DOM中操作样式的两种方式

1 通过元素的style属性

注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位

//html
<div id="box"></div> //js
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red'; <div id="box" style="width:100px; height:100px; background-color:red">

2 通过元素的className属性

//html
<div id="box"></div> //css
.show{
width:100px;
height:100px:
background-color:red;
} //js
var box = document.getElementById('box');
box.className = 'show';

javascript总结40:DOM中操作样式的两种方式的更多相关文章

  1. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  2. 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  3. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  4. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. Hadoop之HDFS文件操作常有两种方式(转载)

    摘要:Hadoop之HDFS文件操作常有两种方式,命令行方式和JavaAPI方式.本文介绍如何利用这两种方式对HDFS文件进行操作. 关键词:HDFS文件    命令行     Java API HD ...

  7. web.config文件中配置数据库连接的两种方式

    web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报    分类: 数据库(74)  在网站开发 ...

  8. LInux内核分析--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    实验者:江军 ID:fuchen1994 实验描述: 选择一个系统调用(13号系统调用time除外),系统调用列表参见http://codelab.shiyanlou.com/xref/linux-3 ...

  9. Linux内核设计第四周学习总结 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    陈巧然原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数A ...

随机推荐

  1. 简单的SOCKET例子

    定义实例socket.socket(),如果括号里不写参数,默认为IPV4+TCP 我们猜测客户端的完整代码如下: 同样我们猜测服务端的代码如下: 实际上运行客户端代码: 说明在py3里,网络编程发送 ...

  2. 将 .NET 任务作为 WinRT 异步操作公开

    转自:http://blogs.msdn.com/b/windowsappdev_cn/archive/2012/06/22/net-winrt.aspx 在博文深入探究 Await 和 WinRT ...

  3. 【BZOJ】2006: [NOI2010]超级钢琴(前缀和+RMQ+堆)

    题目 传送门:QWQ 分析 又不会做....... 显然很好想到前缀和处理一下. 然后考虑最大化结果,直接上st表. 问题来了,然后呢? 怎么做$ length \in [l,r]  $ 呢? 正解是 ...

  4. 【学习笔记】dp基础

    知识储备:dp入门. 好了,完成了dp入门,我们可以做一些稍微不是那么裸的题了. dp基础,主要是做题,只有练习才能彻底掌握. 洛谷P1417 烹调方案 分析:由于时间的先后会对结果有影响,所以c[i ...

  5. Html 上手

    <!-- ctrl + / 注释 ctrl + D 复制整行 html:超文本标记语言标记 标签 元素格式<标签名>标签内容</标签名>标签的写法标签的正确嵌套标签特性 ...

  6. svn关键词BASE, HEAD, COMMITTED, PREV的深入理解

    svn关键词BASE, HEAD, COMMITTED, PREV可以很方便用于日常操作中,但是很多人对他们的工作原理和方式不是太了解. 在这里我将使用用例,诠释他们的作用和意图. 先给出svn手册中 ...

  7. 23_java之IO操作

    01输入和输出 * A:输入和输出 * a: 参照物 * 到底是输入还是输出,都是以Java程序为参照 * b: Output * 把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操 ...

  8. 好记性不如烂笔头-Mysql查找如何判断字段是否包含某个字符串

    好记性不如烂笔头-Mysql查找如何判断字段是否包含某个字符串 利用mysql 字符串函数 find_in_set(); SELECT * FROM users WHERE find_in_set(' ...

  9. python中的json的基本使用方法

    在python中使用json的时候,主要也就是使用json模块,json是以一种良好的格式来进行数据的交互,从而在很多时候,可以使用json数据格式作为程序之间的接口, #!/usr/bin/env ...

  10. System.Drawing.Text.TextRenderingHint 的几种效果

    ; i < ; i++) { g5.TextRenderingHint = (System.Drawing.Text.TextRenderingHint)i; string txt; ; txt ...