<!DOCTYPE HTML>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>无标题文档</title>

         <style>

         #div{width:100px;height:200px;border:2px solid red;background:blue;}

         </style>

         <script>

         window.onload=function(){

             var style1=document.getElementById('style1');

             var shu=document.getElementById('shu');

             var button1=document.getElementById('button1');

             button1.onclick=function(){

             div.style[style1.value]=shu.value;

             };

         };

         </script>

     </head>

     <body>

         请输入样式：<input id="style1" type="text" value=""/><br/>

         请输入数据：<input id="shu" type="text" value=""/>

         <input id="button1" type="button" value="button"/>

         <div id="div"></div>

     </body>

 </html>

通过js来修改div的style（background，border，。。。。。。。）的更多相关文章

  1. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  2. 使用原生JS 修改 DIV 属性

    本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...

  3. 用正则表达式修改html字符串的所有div的style样式

    最近项目中有一接口返回的一个字段是html格式的字符串,里边每个div中style的高度是固定的px,然后再手机端显示的时候发现,div中的内容重叠了:效果图如下: 对应的div如下: 由于高度固定, ...

  4. JS拖动浮动DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  5. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  6. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  7. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  8. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  9. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. Linux系统英文切换中文

    Centos系统作为开源最优秀的Linux版本,很多时候作为服务器使用.由于很多linux初学者不太习惯字符界面操作.一般都会安装图形界面,可是安装之后发现是英文的怎么设置让系统显示为中文呢?咗嚛本经 ...

  2. webapi中常用attribute标签

    HTTP Methods Instead of using the naming convention for HTTP methods, you can explicitly specify the ...

  3. C语言 - 大小端问题

    目前使用的机器都是使用字节BYTE来存储的. 对于跨越多字节的对象,必须搞清楚两个规则: 这个对象的地址是什么 在存储器中如何按照这些字节的存放的书序 对于一个整型对象 a=0x12345678,一共 ...

  4. updateMany

    db.tblDaily.updateMany( {"Comments.ViewCount":0}, {$addToSet:{"Comments.$.CommentDate ...

  5. 推荐两个好用的Xcode插件（提供下载链接）

    这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImageNamed-Xcode-master 提供快速创建自动注释:V ...

  6. SharePoint 入门书籍推荐 转载来源http://www.cnblogs.com/jianyus/p/3513238.html

    最近,总有人说刚入门SharePoint,没有好的资料或者电子书,资料推荐大家多看看博客园和CSDN的博客.对于看博客,我一般是两个思路,要么找一个人的从头到尾看一遍,觉得有意义的,就把地址加收藏:或 ...

  7. D - Digging（01背包，贪心）

    D - Digging Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Submit St ...

  8. 2.定义图形类Shape，该类中有获得面积的方法getArea()；定义长方形类Rect，该类是Shape的子类，类中有矩形长和宽的变量double a,double b，设置长和宽的方法setWidth()、setHeight(),使用getArea()求矩形面积；利用getArea方法实现题1中圆面积的求解。

    // 图形类Shape package d922B; public class Shape { double getArea(ShapePara x){ return x.getArea(); } d ...

  9. vs打开项目，创建虚拟目录，提示权限不足无法写入配置文件

    如题,从源代码管理器上获取下来程序后,自己打开始,提示如题,尝试过以管理员启动vs,给目录权限提升,修改csproj项目配置文件(修改userIIS节点)and so on,无意间在用别的文档编辑器编 ...

  10. pickView不需要明确设置高度

    pickView不用设置高度,若设置了,在iOS8.4.1上不会被填充,会造成没有把pickView高度设置成你想要的,但是布局其他地方的时候却会从你设置的地方开始,就会造成布局不紧挨着或者遮盖着的效 ...