给div动态添加样式

最新推荐文章于 2024-07-11 02:51:24 发布
最新推荐文章于 2024-07-11 02:51:24 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： Javascript 文章标签： div function 浏览器 border css float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiliuhu/article/details/2849003
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>动态应用CSS样式</title>
  6.     <script type="text/javascript">
  7.         全局变量
  8.         //命名空间
  9.         var lee = {};
  10.         Css文本解析
  11.         /*
  12.          * 将CSS文本转成JSON对象
  13.          * @return json
  14.          */
  15.         lee.cssFormatToJSON = function(cssTxt){
  16.             var s = cssTxt.replace(/[ {}]/g, "");        
  17.             var arr = s.split(";");
  18.             var o = {};
  19.             for(var i = 0; i < arr.length; i++){
  20.                 if(arr[i].length > 2){
  21.                     var arr2 = arr[i].split(':');
  22.                     o[arr2[0]] = arr2[1].toString();
  23.                 }
  24.             }
  25.             return o;
  26.         };
  28.         lee.cssStyleNameToJsName = function(name){
  29.             if(name == "float")
  30.                 return "cssFloat";
  31.             else if(name.indexOf('-') > -1){
  32.                 var i = name.indexOf('-');
  33.                 return name.substring(0, i) + name.substr(i+1, 1).toUpperCase() + name.substring(i+2);
  34.             }
  35.             else
  36.                 return name;
  37.         };
  39.         lee.cssTextToJsNameJSON = function(cssTxt){
  40.             var s = cssTxt.replace(/[ {}]/g, "");        
  41.             var arr = s.split(";");
  42.             var o = {};
  43.             for(var i = 0; i < arr.length; i++){
  44.                 if(arr[i].length > 2){
  45.                     var arr2 = arr[i].split(':');
  46.                     var name = lee.cssStyleNameToJsName(arr2[0]);
  47.                     o[name] = arr2[1].toString();
  48.                 }
  49.             }
  50.             return o;
  51.         };
  52.         垃圾回收
  53.         lee.gc = function(d){
  54.             var a = d.attributes, i, l, n;
  55.             if(a){
  56.                 l = a.length;
  57.                 for(i = 0; i < 1; ++i){
  58.                     n = a[i].name;
  59.                     if(typeof d[n] === 'function'){
  60.                         d[n] = null;
  61.                     }
  62.                 }
  63.             }
  64.             a = d.childNodes;
  65.             if(a){
  66.                 l = a.length;
  67.                 for(i = 0; i < l; ++i){
  68.                     purge(d.childNodes[i]);
  69.                 }
  70.             }
  71.         }
  72.         Div类
  73.         function Div(){
  74.             this.div = document.createElement("div");
  75.         }
  77.         Div.prototype.addStyle = function(cssTxt){
  78.             var o = lee.cssTextToJsNameJSON(cssTxt);
  79.             for(var n in o)
  80.                 this.div.style[n] = o[n];    
  81.         };
  83.         Div.prototype.appendParent = function(parent){
  84.             this.parent = parent;
  85.             this.parent.appendChild(this.div);
  86.         };
  88.         Div.prototype.removeSelf = function(){
  89.             lee.gc(this.div);
  90.             this.parent.removeChild(this.div);
  91.         };
  93.         Div.prototype.addEvent = function(type, func){
  94.             //IE浏览器
  95.             if(this.div.attachEvent)
  96.                 this.div.attachEvent("on" + type, func);
  97.             //火狐浏览器
  98.             else if(this.div.addEventListener)
  99.                 this.div.addEventListener(type, func, false);
  100.         };
  101.     </script>
  102. </head>
  103. <body>
  104.     <script type="text/javascript">        
  105.         测试代码
  106.         var div = new Div();
  107.         //目前还不支持类似于{border:solid 1px red;}这样的结构
  108.         div.addStyle("{position:absolute;left:200px;top:60px;width:100px;height:100px; backgroundColor:#EFEFEF;border-style:solid;border-color:orange;border-width:2px;}");
  109.         div.appendParent(document.body);        
  110.         div.addEvent('click', function(){div.removeSelf.apply(div,[]);});
  111.     </script>
  112. </body>
  113. </html>

xiliuhu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目中div的动态样式绑定
qq_33235680的博客
01-21 1166
vue项目中div的动态样式绑定
JavaScript动态创建div属性和样式示例代码
10-26
JavaScript动态创建div元素、属性和样式的示例代码涉及了几个重要的知识点。这些知识点不仅包括了如何用JavaScript动态生成HTML元素，还涵盖了如何为这些元素设置属性和样式。下面详细介绍这些技术点。 首先，动态...
div动态设置样式
wang_tao219的博客
09-02 1750
1、html中的div  2、js文件中的Ajax： $.ajax({ url : "../getCartAddressInfo.do", type: "POST", dataType : 'json', data : {  'userId':userId }, success : function(data) { var otherhtml="
vue动态控制div的css属性
最新发布
weixin_41064231的博客
07-11 28
首先要保证你的div要在<template></template>里面，然后可以这样写登录后复制 <div class="sub-window-wrapper" :style="dynamicStyles"></div>1.下面是呼应登录后复制 computed: { ...
JavaScript动态创建div属性和样式
huangcaiyan
08-25 1265
[size=x-large][b][align=center]JavaScript创建div的属性和样式[/align][/b][/size] [b]问题域：[/b] 如何由JavaScript创建div节点元素： ◆创建div节点元素的属性； ◆创建div节点元素的样式； [b]解决方案：[/b] 1.创建div元素： Javascript代码 [co...
div里添加元素样式
bankuang9226的博客
08-16 219
function YUEFEN() { $(".BBNL_2").click(function () { $(".BBNL_2").css("color", "#999"); $(".BBNL_2").css("background-color", "#fff"); $(".BBNL123").text("0"); ...
再谈动态添加样式规则的方法
09-25
【动态添加样式规则的方法】 在Web开发中，样式与结构的分离是提高代码可维护性和重用性的重要原则。通常，我们会将样式规则写入单独的CSS文件中，然后通过`<link>`标签导入到HTML文档中。然而，面对一些特殊场景，...
JavaScript动态设置div的样式的方法
10-23
JavaScript动态设置div的样式涉及到了Web前端开发的核心概念之一，即通过JavaScript脚本语言来动态修改HTML页面元素的样式属性，从而实现网页样式的动态变化。这种技术在用户交互、页面效果丰富等方面发挥了重要的...
Dreamweaver如何给div添加css样式? dw给div添加css样式的方法
09-22
在Dreamweaver中为div添加CSS样式，可以极大地提高工作效率。以下是详细的操作步骤： 1. **插入div标签**： 首先，你需要在Dreamweaver中打开你的HTML文档。在顶部的菜单栏中，选择“插入”菜单，然后在下拉列表中...
给Ajax返回的HTML标签动态添加样式的方法
10-20
总结来说，给Ajax返回的HTML标签动态添加样式的关键在于，在页面加载时预定义好相关的CSS样式规则。这样，无论何时通过Ajax返回的HTML内容被添加到DOM中，这些内容都会直接应用预定义的样式，从而保持页面布局的一致...
div单选多选-动态改变样式
Mr-Bean的博客
08-30 1298
单选： 需求： 两个div，一次只能点击一个，将点击的div样式进行改变-加背景图并改背景色 效果图： HTML： 条件表达式动态绑定样式：:class="{'active': isChange==index} <div class="test" :class="{'active': isChange==index}" v-for="(item,index) in upArr" :key="index" @tap="tapInfo(index,item.id)"> <div cl
用js怎么在div元素块原先的style基础上追加css属性
虚拟-Worder的博客
03-20 7535
有些时候我们会通过js改变元素的css属性，例如：ele.style.xxx="xxx"；但是这样，ele原先所具有的css属性就会被覆盖掉，那么怎么把css属性追加到原先的style后面呢？ 这里以追加float属性为例：假设一个button以经具有了漂亮的效果，现在想让其左对齐： ——&gt; button.style=button.style.cssText+"float:left;";这样...
vue动态设置样式
flyflyzhao8的博客
03-11 576
vue动态设置元素的样式
给html元素追加style,js能给html标签添加css样式吗
weixin_27972919的博客
05-31 831
js能给html标签添加css样式吗js能给HTML标签添加css样式，也能改变HTML标签的样式，具体做法如下：下面来看一下代码 :效果如下 :JavaScript代码如下：代码解释如下 :var inObj = document.getElementById("btn"); //通过id名称“btn”来获取元素,声明一个变量inObj来储存这个元素inObj.onclick = functi...
如何对循环中的div动态添加单独的样式
weixin_51523667的博客
03-17 498
如何对循环中的div动态添加单独的样式
div + css
阅后即焚
09-25 1289
div + css 什么是div div就是html一个普通标签，进行区域划分。特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。 div通常其是块级元素 什么是CSS CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以是HTML页面更好看，CSS...
div style常用属性和实例代码
Java技术博文
12-23 1623
div属性可以专门写在css文件中，也可以直接写在html中。div常用布局参数有：Width、Height、margin、padding、position、left、top、right、bottom、z-index、font、color、text-align、overflow、direction、line-height、Word-spacing、border、display、float、back
vue二种方式根据条件判断显示不同样式
热门推荐
songjuntao8的专栏
08-04 1万+
1.v-if-v-else/v-show的方式，只显示其中之一 #v-if v-else <div class="blue" v-if="item.num == '0'">{{ item.num }}</div> <div class="orange" v-else>{{ item.num }}</div> #v-show <div class="blue" v-show="item.num == '0'">{{ item.num }}&.
vue之组件动态添加style样式的四种写法（齐全）
2201_75705263的博客
10-09 6698
根据情况来更改样式的情况非常普遍，下边就是最全的使用锦集！
vue3中给div添加样式
05-30
在 Vue 3 中，设置 div 标签的样式有以下几种方式： ...在上面的例子中，我们使用了 `:class="{ 'red': isRed }"` 指令来动态绑定 div 标签的类样式，当 `isRed` 为 true 时，div 标签会添加 `red` 类样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值