js中用cssText设置css样式

(2012-08-21 10:40:22)

标签:

js

 
如果网页中一个 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一个元素,难道还想这样简单点?那就要想别的办法了~
于是大家就写了一个又一个的函数,经典的两个是:

var obj = document.getElementByIdx_x_x('no');
function setStyle(obj, css) {
for(var attr in obj){
obj.style[attr] = css[attr];
}
}
setStyle(obj,{width:"400px",height:"300px"});

当然还有更简单的,cssText:

var obj = document.getElementByIdx_x_x('no');
obj.style.cssText = "width:400px; height:300px;";

当然这种方法对于create的元素初始化css样式来说很简单很方便

cssText设置css样式的更多相关文章

  1. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  2. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  3. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  4. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  5. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. react学习(四)之设置 css样式 篇

    react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...

  8. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  9. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

随机推荐

  1. bzoj1008: [HNOI2008]越狱

    思路:首先所有情况就是m^n,然后不可能发生越狱的情况就是第一个有m种选择,第二个要与第一个不同就是m-1种选择,第三个要与第二个不同也是m-1种选择,然后不可能发生越狱的情况数就是m*(m-1)^( ...

  2. Headfirst设计模式的C++实现——抽象工厂(Abstract Factory)

    Dough.h #ifndef _DOUGH_H #define _DOUGH_H class Dough { }; #endif ThinCrustDough.h #ifndef _THIN_CRU ...

  3. python 自动化之路 day 03

    内容目录: 1. 字典 2. 集合 3. 文件处理 4. 字符编码   1. 字典操作 字典一种key - value 的数据类型,使用就像我们上学用的字典,通过笔划.字母来查对应页的详细内容. 语法 ...

  4. ubuntu 安装qq

    受不了webqq那个界面 ,各种不习惯 .今天在ubuntu 12.04LTS 版本中 ,终于装上了qq2012,下面介绍一下安装方法 1  安装 wine sudo  apt-get install ...

  5. Linux网络应用编程之集线器(Packet Tracer仿真)

    Packet Tracer入门 一,集线器概况 对接收到的信号进行再生整形放大,以扩大网络的传输距离,同时把所有节点集中在以它为中心的节点上. 工作于OSI(开放式系统互联参考模型)的最底层(物理层) ...

  6. 跨域技术-jsonp

    JSONP是JSON with padding 的简写,其有两个部分组成,一个是回调函数,一个是数据,其基本格式如下 function handleResult(result){ alert(resu ...

  7. Winform打包发布图解

    最近,机房收费系统的个人版接近尾声,到了打包发布的时刻.VB.NET的打包发布与VB6.0的打包发布存在不小的差别.下面我们来详细看一下如果打包发布. 第一步: 打开VS,新建项目,选择其他项目类型- ...

  8. ThinkPHP下使用Ueditor

    在做课程设计的时候想到用百度的Ueditor,可在配置的时候出现了一些问题 Ueditor感觉不是很难,以前有个人定制的,现在取消了这项服务,但是我们可以自己进行配置 下载地址:http://uedi ...

  9. linux的fork函数

       fork函数  头文件:#include<unistd.h> 函数原型:pid_t fork( void);(pid_t 是一个宏定义,其实质是int 被定义在#include< ...

  10. 第 3 章 单例模式【Singleton Pattern】

    以下内容出自:24种设计模式介绍与6大设计原则 这个模式是很有意思,而且比较简单,但是我还是要说因为它使用的是如此的广泛,如此的有人缘,单例就是单一.独苗的意思,那什么是独一份呢?你的思维是独一份,除 ...