一次偶然在鑫大技术博客上发现  style  标签配合contenteditable 可编辑属性 实现动态编辑css

  这里我就回顾了下  contenteditable  可编辑属性 (这个属性并无浏览器兼容问题,常用来模拟textarea属性)

      1.该属性有两个值   true(开启可编辑) false(关闭可编辑) 注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承。

  在style上利用 contenteditable属性 可将style内容类似于在textarea中显示出来,并且是可编辑的,在编辑的时候代码会相应的响应反馈给浏览器,这就给了我们可以利用该属性来做

<style contenteditable>.test-box{ width:60px;height:60px;background:pink;}</style>

css style 标签可编辑的更多相关文章

  1. style标签进行实时编辑及修改css(转)

    心得: style也是一个标签,那么也可以使用css对其进行编辑 html5新属性 contenteditable,可以让标签元素处于可编辑状态,对于style标签也适用 为了不影响head标签里的s ...

  2. style标签下的CSS代码的显示与实时编辑

    style标签也是标签 首先设置body style的样式 body style{ display:block; padding:0.6em 0.8em; border:1px dashed #ccc ...

  3. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  4. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  5. java 去掉html/style/css等标签

    //定义script的正则表达式 private static String regEx_script="<script[^>]*?>[\\s\\S]*?<\\/sc ...

  6. HTML+css基础 标签的起名 style标签 选择器的使用规则

    标签的起名: 1. 官方提供的标签名 2. 类名: 用class属性起的名字 3. Id名: 用id属性起的名字 唯一的 我们把这种起名叫选择器 class选择器 id选择器  标签选择器 style ...

  7. CSS各类标签用法——选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  9. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

随机推荐

  1. JavaScript修改注册表

    JavaScript修改注册表 2009-04-14 11:22:13|  分类: JS相关 |  标签: |字号大中小 订阅     注册表有关安全设置项的说明: 注册表路径: HKEY_CURRE ...

  2. 前端之JavaScript笔记4

    一 按键事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. 2018.10.08 NOIP模拟 栅栏(树状数组+rand)

    传送门 今天的送分题. 首先考虑每次给要围上栅栏的矩阵里的整体加上1,如果栅栏被撤销就整体减1,最后比较两个点的值是否相同来进行判断. 然而这样的效果并不理想,很容易卡掉. 进一步思考,我们第iii次 ...

  4. 2018.09.07 Amount of degrees(数位dp)

    描述 求给定区间[X,Y]中满足下列条件的整数个数:这个数恰好等于K个互不相等的B的整数次幂之和. 例如,设X=15,Y=20,K=2,B=2,则有且仅有下列三个数满足题意: 17 = 24+20, ...

  5. ImageResizer 3.4.3配置

    <?xml version="1.0" encoding="utf-8"?> <!-- For more information on how ...

  6. 破解Unity5.3.4f1

    破解的目的是将受限的个人版变为全功能的Pro版,破解后就可以使用所有功能了,界面也变成了黑色的主题. 破解网址(支持最新版的5.3.4f1): http://www.ceeger.com/forum/ ...

  7. Netty学习第三节Netty的入门级学习

    1.原生NIO存在哪些缺陷     (1)NIO的类库和API繁杂,使用也比较麻烦,需要熟练掌握selector.ServerSocketChannel.SocketChannel.ByteBuffe ...

  8. Linux学习--2

    字符串 字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似 单引号字符串的限制:单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的:单引号字串中不能出现单引号(对 ...

  9. UltraEdit配置

    1.如何在vivado中调用UltraEdit 1.语法高亮 支持不同的编程语言,但是要添加相就的文件,这样不同语言的关键字就可以高亮显示. 在高级-> 配置 –> 语法高亮,选择文档 2 ...

  10. 做MFC的时候引用了头文件但VC还是报missing storage-class or type specifiers

    我在客户端clg.h头文件中引用了头文件“ClientSocket.h”,然后在客户端clg.h中的类中声明了类CClientSocket的对象,可是编译报错:d:\vc++\客户端\客户端dlg.h ...