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. LA 3708 Graveyard(推理 参考系 中位数)

    Graveyard Programming contests became so popular in the year 2397 that the governor of New Earck -- ...

  2. bc

    调试脚本报错bc: command not found 原因是因为这个linux环境里没有安装计算器工具bc 用 apt-get install bc 或者 yum -y install bc 安装后 ...

  3. MYSQL命令cmd操作

    今天我们就来看一下数据库的各种命令,以下命令全部是从CMD命令窗口下的命令行输入指令,首先如果如果输入mysql,系统提示“mysql不是内部命 令或外部命令.那么这其实是环境变量没有设置好的原因,例 ...

  4. python 自动化之路 day 面向对象基础

    1.面向對象基础概述 面向过程: 根据业务逻辑从上到下垒代码(如果程序修改,对于依赖的过程都需要进行修改.) 函数式: 将某功能代码封装到函数中,如后便无需重复编写,仅需要调用函数即可 面向对象: 世 ...

  5. C# Linq To DataTable 分组统计 DEMO

    DataTable dt = SQLLayer.Get工作量统计(beginDate, endDate);             var querySum = from t in dt.AsEnum ...

  6. word 2013 没有控件菜单怎么办,添加控件菜单

    方法/步骤   打开word软件,然后点击菜单栏中最左边的“文件”菜单项,如下图红色方框所示 2 点击文件后,就打开word的设置对话框,然后在左边的设置列表中点击“自定义功能区”,打开自定义功能区设 ...

  7. lucene 实现word,pdf全文检索源码

    创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...

  8. STM32之DMA

    一.DMA简介 1.DMA简介 DMA(Direct Memory Access:直接内存存取)是一种可以大大减轻CPU工作量的数据转移方式. CPU有转移数据.计算.控制程序转移等很多功能,但其实转 ...

  9. URL参数加密解密

    /// <summary>        /// DES加密字符串        /// </summary>        /// <param name=" ...

  10. PPT2010小技巧 教你如何快捷抠图

    相信不少人在做PPT时,都有想插入个漂亮个性图案的想法,但是往往手头上的图片都不太令人满意,需要“裁剪”一下才能达不到自己想要的效果.这时大部分人可能会PS,但是相比起今天要分享给大家的方法,步骤就显 ...