变绿变宽变高

如果单单要做出更改一个div的颜色宽高,javascript的实现会很简单,但是写完后,会不会发现写了三个十分相似的函数,对,我们要合并它,尽量减少代码的冗余,也方便以后的修改,让你的代码更灵活。

下面我们看两种属性的赋值方法。

(1)odiv.style.background="green";

(2)odiv.style[‘background‘}="green";

如果你单单要做一个赋值操作的话,那么这两种方法是  没有区别的。大概 你已经想问,那什么 时候有区别呢?

/*改变div的背景(div的id为box)*/

function changeColor(color)

{

var odiv = document.getElementById(‘box‘);

odiv.style.background = color;

}

//写完这个函数你会 发现,无论你想改成什么颜色,传参数过来就ok,changeColor(‘black’),changeColor(‘green’),

都可以,好,回到主题,我们不仅仅要改变它的颜色,它的别的属性我也想改变,

function setStyle(name,value)

{

var odiv = document.getElementById(‘box‘);

odiv.style.name= value;//运行一下你会发现这是错的。

}

ok,显然,现在我们已经不能像之前那么写了,回到文章的最开始,你会看到我们写的两种属性的不同赋值方法。

第二种就是这个时候用的。一个小小的修改。

function setStyle(name,value)

{

var odiv = document.getElementById(‘box‘);

odiv.style[name]= value;

//当然,你也可以写成odiv[‘style’][name]= value;

}

总结一下:第一种方法能实现的第二张都可以实现,而第二种能实现的第一种不一定能实现,也就是说,第二种属性赋值方法功能更强大,当然,通常我们会更青睐于第一种。

最后,献上我的原代码,仅供参考。

时间: 2024-10-13 01:47:44

变绿变宽变高的相关文章

CSS布局篇——固宽、变宽、固宽+变宽

学了前端挺久了,最近写一个项目测试系统,布局时发现自己对变宽+固宽的布局还没有完全掌握,所以在这里总结一下,以后需要的时候回头看看. 1.最简单的当然是一列或多列固宽 例如两列固宽: 1.设置一个外围div--container,是两列显示的总大小,可以是固定800px等值. 2.在container内分别设置两个div--side.content 根据需要设置像素,比如一个是300px,另一个是500px: 分别设置float:left; 2.两列变宽,同1,只不过将像素改为百分比,例如是一个

要求用户输入宽和高,显示出长方形的面积。

import java.util.Scanner; /** * @author 蓝色以太 * 要求用户输入宽和高,显示出长方形的面积. */ public class Area { public static void main(String[] args) { Scanner sc=new Scanner(System.in); System.out.println("请输入长度:"); double length=sc.nextDouble(); System.out.printl

输入一个长方形的宽和高(正整数),请打印出它的边长和面积

请输入一个长方形的宽和高(正整数),请打印出它的边长和面积. #include <stdio.h>void main(){ int l;                   // 宽 int high;             // 高 int c;                 //边长 int s;                //面积 printf("请输入长方形的长:\n") ; scanf("%d",&l); printf(&quo

【Android】获取控件的宽和高

有时候我们须要在Activity的时候获取控件的宽和高来做一些操作,以下介绍三种获取宽和高的方式: 1. onWindowFocusChanged @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { int width = image.getMeasuredWidth(); int height = image.ge

C# 上传图片前判断上传图片的宽和高

网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileUpload ID="fuTx" runat="server" CssClass="uploadFile" /> cs后台代码: System.Drawing.Image upimage = System.Drawing.Image.FromSt

Android 获得view的宽和高

转自:http://blog.csdn.net/yangdeli888/article/details/25405263 在oncreate()中利用view.getWidth()或是view.getHeiht()来获取view的宽和高,看似没有问题,其实他们去得值是0,并不是你想要的结果? 这是为什么呢? 在调用oncreate()方法时,界面处于不可见状态,内存加载组件还没有绘制出来,你是无法获取他的尺寸. 那如何在绘制组件之前能获取到该组件的尺寸大小呢? 这里有三种方法,经过验证的: 方法

img图片自适应宽和高[转]

控制缩略图常见的是JS来控制,还有就是最直接的方法定义img的宽高:下面两种方法自适应宽和高,zhenzhai推荐使用CSS方法:一.CSS方法:主 要是在CSS设置最小值和最大值(max-width: 100px; max- height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 

一个小问题——宽,高和图片大小。

打开相册查看一张图片数据如下: JPG格式 宽度:1920px 高度:2560px 文件大小:1.85MB 现在手机上一般采用32位ARG_8888格式保存像素,也就是说一个像素点占用32位,4byte. 所以这张图片的原始数据所占内存大小为1920x2560x4/1024/1024 = 18.75MB 这里的文件大小为1.85MB是因为JPG格式的图片是压缩之后得到的,有一定的压缩比例. 也就是说18.75MB是原始无损图片的大小,1.85MB是保存到相册中压缩生成的jpg文件的大小. 一个小

Android中获取图片的宽和高

在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory.decodeResource(getResources(), R.drawable.photo3); //创建副本 //1.创建与原图一模一样大小的bitmap对象,该对象中目前是没有内容的,可以比喻为创建了和原图一样大小 //的白纸 Bitmap bmCopy = Bitmap.createBit