<!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. java对数计算

    Java对数函数的计算方法非常有问题,然而在API中却有惊人的误差.但是假如运用了以下的方法,用Java处理数字所碰到的小麻烦就可以轻而易举的解决了. Sun的J2SE提供了一个单一的Java对数方法 ...

  2. MySQL5.6新特性Index conditontion pushdow

    index condition pushdown是MySQL5.6的新特性,主要是对MySQL索引使用的优化. Index condition push简称ICP,索引条件下推,将索引条件从serve ...

  3. poj2386

    湖计数描述由于最近的降雨,水汇集在不同的地方,在农民约翰的领域,这是代表一个长方形的N×M(1μ= 100:1 = M = 100)平方.每一方都包含水(’w')或干燥的土地(“.”).农民约翰想弄清 ...

  4. There was a problem parsing the package（android）

    android phone when you install the application there will inevitably be "a problem parsing the ...

  5. Kmeans算法与KNN算法的区别

    最近研究数据挖掘的相关知识,总是搞混一些算法之间的关联,俗话说好记性不如烂笔头,还是记下了以备不时之需. 首先明确一点KNN与Kmeans的算法的区别: 1.KNN算法是分类算法,分类算法肯定是需要有 ...

  6. YII2 小部件（widgets）

    小部件基本上在views中使用,在视图中可调用 yii\base\Widget::widget() 方法使用小部件. 该方法使用 配置 数组初始化小部件并返回小部件渲染后的结果. 例如如下代码插入一个 ...

  7. JavaScript shift() 方法

    http://www.w3school.com.cn/jsref/jsref_shift.asp 定义和用法 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值. 语法 arr ...

  8. HDU2206：IP的计算

    Problem Description 在网络课程上,我学到了很多有关IP的知识.IP全称叫网际协议,有时我们又用IP来指代我们的IP网络地址,现在IPV4下用一个32位无符号整数来表示,一般用点分方 ...

  9. Golang: pprof

    压测的时候,如果在应用包里加入runtime包,会对压测产生非常严重的干扰. 测试1:开启runtime包 [luwenwei@test-weishi01v ~]$ siege -c --time=1 ...

  10. model中字段格式验证

    注释部分在前端不显示 /// <summary> /// 链接地址 /// </summary> [Display(Name = "链接地址")] //[D ...