<!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. hdu 5874 Friends and Enemies icpc大连站网络赛 1007 数学

    #include<stdio.h> #include<iostream> #include<algorithm> #include<math.h> #i ...

  2. vultr vps官网改版免费注册教程（最新优惠码）

    本站强烈推荐的,国外超高性价比vps服务器Vultr官方网站最近更新了,导致一些朋友心生茫然,今天写个简易教程给大家. 首先是打开vultr官网,免费注册一个vultr账号.填写邮箱地址.密码,非常简 ...

  3. NOIP2013-普及组复赛-第一题-计数问题

    题目描述 Description 试计算在区间 1 到 n 的所有整数中,数字 x(0 ≤ x ≤ 9)共出现了多少次?例如,在 1到 11 中,即在 1.2.3.4.5.6.7.8.9.10.11 ...

  4. php笔记(一)面向对象编程

    <?php //定义一个类 class Car { var $name = '汽车'; function getName() { return $this->name; } } //实例化 ...

  5. 对方网络ping不通

    后台接口往往部署在其他服务器上如果ping不同 很大可能是因为对方开防火墙的原因 解决方法:控制面板-windows防火墙-打开或关闭windows防火墙

  6. MySQL DATE_FORMAT

    MySQL   DATE_FORMAT(date,format) 根据format字符串格式化date值 (在format字符串中可用标志符: %M 月名字(January……December) %W ...

  7. 利用xcopy命令实现本地文件复制到远程服务器的方法

    net use \\192.168.1.198\ipc$ Zqf198703 /user:royalpeak xcopy g:\backup\*.* \\192.168.1.198\数据备份 /D / ...

  8. JPA 系列教程13-复合主键-@EmbeddedId+@Embeddable

    复合主键 指多个主键联合形成一个主键组合 需求产生 比如航线一般是由出发地及目的地确定,如果要确定唯一的航线就可以用出发地和目的地一起来表示 ddl语句 同复合主键-2个@Id和复合主键-2个@Id+ ...

  9. 项目管理实践【六】自动同步数据库【Using Visual Studio with Source Control System to synchronize database automatically】

    在上一篇项目管理实践[五]自动编译和发布网站中,我们讲解了如何使用MSBuild+Robocopy+WebDeployment来自动编译和部署网站,今天,我们来看一下,如何使用MSBuild +SVN ...

  10. iOStextView的代理方法展示

    UITextView的代理方法 textViewShouldBeginEditing: and textViewDidBeginEditing: - (BOOL)textViewShouldBegin ...