<!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. FZU 1896 神奇的魔法数 dp

    网上都说是数位dp 但是虽然在队伍里负责动态规划 但是数位dp还不会…… 百度了一下 发现和最大子序列思路差不多…… 最大子序列的dp[i][j]是表示两个序列前i项和前j项的最大子序列…… dp[i ...

  2. 【Linux】给Linux配置SNMP用户以及协议

    1 检查是否已经安装snmp的rpm包Ideploy:~ # rpm -aq | grep snmp libsnmp15-5.4.2.1-8.12.10.1 snmp-mibs-5.4.2.1-8.1 ...

  3. 设正整数n的十进制表示为n=ak……a1a0(0<=ai<=9,0<=i<=k,ak!=0),n的个位为起始数字的数字的正负交错之和T（n）=a0+a1+……+（-1）kak，证明：11|n的充分必要条件是11|T（n）；(整除理论1.1.2）)

    设正整数n的十进制表示为n=ak……a1a0(0<=ai<=9,0<=i<=k,ak!=0),n的个位为起始数字的数字的正负交错之和T(n)=a0+a1+……+(-1)kak, ...

  4. 简析TCP的三次握手与四次分手【转】

    转自 简析TCP的三次握手与四次分手 | 果冻想http://www.jellythink.com/archives/705 TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文 ...

  5. [Mark] openvswitch megaflow

    Megaflow is an OpenVSwitch (OVS) feature than enables us to install flows for which some fields are ...

  6. python 字符转换

    我们所看到的“明文字符串”,都是经过编码(比如ASCII.Uncoded.UTF-8.GB-2312等)后呈现在我们面前的. 文本中“3082”想要“所见到所得”到内存中处理,必须decode('he ...

  7. Linux自动修改IP脚本（手动编写）

    #!/bin/bashnetmask=255.255.255.0IP_PATH=/etc/sysconfig/network-scripts/ifcfg-eth0GM_PATH=/etc/syscon ...

  8. Chapter 1 First Sight——33

    At that moment, the bell rang loudly, making me jump, and Edward Cullen was out of his seat. 在这个时候,铃 ...

  9. Java中的Builder模式

    package com.mc.bsfram.others.entity; public class Person { private String name; private String addre ...

  10. MySQL安装--ubuntu

    1. 执行命令: $ apt-get install mysql-server 执行上述命令会自动安装mysql-client,mysql-common等包. 2. 安装过程中会让你给root账号设置 ...