【转载】JS操作DIV全属性

最新推荐文章于 2023-05-14 14:13:13 发布
最新推荐文章于 2023-05-14 14:13:13 发布
阅读量291 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juelingfeng/article/details/38416683
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>JS操作DIV全攻略</title>  
  6.     <mce:style><!--  
  7.     .test{width:200px; height:200px; background-color:Red;font-size:12px; font-weight:normal;border:solid 1px red;}  
  8.       
  9. --></mce:style><style mce_bogus="1">    .test{width:200px; height:200px; background-color:Red;font-size:12px; font-weight:normal;border:solid 1px red;}  
  10.     </style>  
  11.   
  12.     <mce:script type="text/javascript"><!--  
  13.     //控制内容  
  14.     function settext()  
  15.     {  
  16.         var el=document.getElementByIdx_x("testdiv");  
  17.         el.innerHTML="测试数据！";  
  18.     }  
  19.     //控制位置  
  20.     function setlocation()  
  21.     {  
  22.         var el=document.getElementByIdx_x("testdiv");  
  23.         el.style.top="100px";  
  24.         el.style.left="100px";  
  25.     }  
  26.     //设置背景色  
  27.     function setbrcolor()  
  28.     {  
  29.         var el=document.getElementByIdx_x("testdiv");  
  30.         el.style.backgroundColor="#997788";  
  31.     }  
  32.     //设置背景图  
  33.     function setbrimg()  
  34.     {  
  35.         var el=document.getElementByIdx_x("testdiv");  
  36.         el.style.backgroundImage="url(img.jpg)";  
  37.     }  
  38.     //设置字体  
  39.     function setfont()  
  40.     {  
  41.         var el=document.getElementByIdx_x("testdiv");  
  42.         el.style.color="#FFFFFF"//设置字体  
  43.         el.style.fontSize="15px";  
  44.         el.style.fontWeight="bold";  
  45.     }  
  46.     //设置calss样式  
  47.     function setcss()  
  48.     {  
  49.         var el=document.getElementByIdx_x("testdiv");  
  50.         el.className="test";  
  51.     }  
  52.          
  53.       
  54.     //获得键盘按键并操作DIV上下左右移动 top left 必须加px  
  55.     function GetKey(e)  
  56.     {   
  57.         var el=document.getElementByIdx_x("testdiv");//获得DIV        
  58.         e=e||event;//兼容IE FF  
  59.         var Key=e.keyCode||e.which||e.charCode;//获得键盘码  
  60.         //alert(Key);//弹出KEY值  
  61.         if(Key=="39")//右  
  62.         {              
  63.             el.style.left=(parseInt(el.style.left==""?"0":el.style.left)+1)+"px";  
  64.         }else if(Key=="37")//左  
  65.         {  
  66.             el.style.left=(parseInt(el.style.left==""?"0":el.style.left)-1)+"px";  
  67.         }else if(Key=="38")//上  
  68.         {  
  69.             el.style.top=(parseInt(el.style.top==""?"0":el.style.top)-1)+"px";  
  70.         }else if(Key=="40"){//下  
  71.           
  72.             el.style.top=(parseInt(el.style.top==""?"0":el.style.top)+1)+"px";  
  73.         }          
  74.     }  
  75.     document.onkeyup = GetKey;//附加键盘按下事件  
  76.   
  77.   
  78.       
  79. // --></mce:script>  
  80. </head>  
  81. <body style="margin:0px" mce_style="margin:0px">  
  82. <!-- position:absolute 如果控制移动必须加上这个 -->  
  83. <div id="testdiv" style="width:100px; height:100px; background-color:#d3d3d3; position:absolute;"></div>  
  84. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />上下左右可以操作DIV，已兼容IE FF<br />  
  85. <input type="button" value="控制层内容" οnclick="settext()" />  
  86. <input type="button" value="控制层位置" οnclick="setlocation()" />  
  87. <input type="button" value="控制层背景色" οnclick="setbrcolor()" />  
  88. <input type="button" value="控制层背景图" οnclick="setbrimg()" />  
  89. <input type="button" value="控制层文字" οnclick="setfont()" />  
  90. <input type="button" value="控制层css" οnclick="setcss()" />  
  91. </body>  
  92. </html>  
绝凌峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js Div属性大全
10-30
1.js 控制　DIV　 2.js通过标签对DIV操作． 例如： accessKey　　设置或获取对象的快捷键。 align　　设置或获取对象相对于显示或表格的排列方式。 atomicselection　　指定元素及其内容是否可以一不可见单位统一选择。 begin　　设置或获取时间线在该元素上播放前的延迟时间。 blockDirection　　获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左。 canHaveChildren　　获取表明对象是否可以包含子对象的值。 canHaveHTML　　获取表明对象是否可以包含丰富的 HTML 标签的值。 className　　设置或获取对象的类。 clientHeight　　获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 clientLeft　　获取 offsetLeft 属性和客户区域的实际左边之间的距离。
JS操作DIV全属性
生活要快乐 - 魏言
01-15 2931
JS操作DIV全攻略 <!-- .test{width:200px; height:200px; background-color:Red;font-size:12px; font-weight:normal;border:solid 1px red;} --> .test{width:200px; height:200px; bac
js中div操作
weixin_33795093的博客
05-22 308
在js中创建一个div，以及对div的一些操作。 varbottomer=document.createElement("div");//创建一个div对象（背景层） //定义div属性 bottomer.setAttribute("id","btDiv"); bottomer.style.position="a...
js div操作
vzhangxun
02-27 149
New Document function showlayer(obj) { document.getElementById("idd").src="js1.jpg"; l = document.getElementById("thelayer"); l.innerHTML=""; ...
JS控制div的属性
qq_36366212的博客
09-27 1051
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;控制div属性&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery/3.3.1/
JavaScript动态改变div属性的实现方法
10-23
主要介绍了JavaScript动态改变div属性的实现方法,涉及javascript操作页面div元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Javascript控制div属性动态变化实例分析
10-23
主要介绍了Javascript控制div属性动态变化,以实例形式较为详细的分析了JavaScript响应鼠标事件动态操作页面元素属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js操作css属性实现div层展开关闭效果的方法
10-24
主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下
JavaScript动态创建div属性和样式示例代码
12-01
本文将深入探讨如何使用JavaScript动态创建`div`元素，并设置其属性和样式。以下是一些示例代码来帮助理解这一过程。 首先，让我们看看如何创建一个基本的`div`元素。在JavaScript中，我们可以使用`document....
08JS操作DIV样式
Blog of Lytracy
09-07 2363
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
js实现对多个div的添加并指定div删除
02-16
我实现了多个div的动态添加，并且实现指定div的删除。 实现这个功能一些问题，添加多个div，它们id就可能会相同，这对我们无论后台还是前台处理都有麻烦的问题。所以我对id进行自增，然后就是要实现对指定div的删除。 虽然是个小功能，但网上的资料还真没我这个好。 需要jquery，我已经全部打包。
js简单控制div
kingdom031的专栏
01-12 196
&lt;html&gt; &lt;head&gt; &lt;style type="text/css 阅读全文 类别：Js?查看评论
js拖动div
白茶的博客
04-12 435
接着定义一个变量isClick判断鼠标是否按下，再定义两个变量记录鼠标按下的一瞬间的offsetX和offsetY，因为鼠标在拖动过程中相对于div中的位置不会改变。
控制div属性
Hling's Blog
04-23 714
坚持每天写demo系列控制div属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lesson1-index1控制div属性</title> <style> #outer{ width: 500px; margin: 0
NULL字段和空字段
方逸涛的专栏
04-05 698
1.  javascript操作DIV总结工作中，偶尔也会做做前台，每次都需要对一些简单的javascript和html标签进行重新学习，今天就稍微总结一下，主要是针对div的操作，也还包括一些其他基本控件。一.div1.设置div的显示或隐藏代码片段document.getElementById("div1").style.display="none";//隐藏 do
javascript怎么控制css中的div容器的展示和隐藏
最新发布
m0_68094390的博客
05-14 1366
在这个例子中，通过getElementById方法获取id为myDiv的div元素，然后通过classList属性添加或移除名为show的class，从而控制div容器的展示和隐藏。在这个例子中，通过getElementById方法获取id为myDiv的div元素，然后通过style属性设置display属性为block或none，从而控制div容器的展示和隐藏。可以通过JavaScript的style属性来设置CSS样式中的display属性，从而控制div容器的展示和隐藏。
js控制div的属性
qq_43955202的博客
05-13 1167
Demo1：控制div的属性 第一种方法： 博主傻瓜式手撕代码，真的是傻瓜式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
js改变div属性
qq_28147861的博客
10-22 8089
body{ margin: 0px; padding: 0px; } #show { background: red; width: 100px; height: 50px; float: left; margin-top: 15px; margin-left: 10px; color: white;
JS如何获取div的属性
04-20
您可以使用JavaScript中的getAttribute()方法来获取div元素的属性值。例如，如果您想获取一个名为“id”的div元素的属性值，可以使用以下代码： var divElement = document.getElementById("myDiv"); var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值