一次偶然在鑫大技术博客上发现  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. Linux下JDK应该安装在哪个位置

    在百度知道上看到的回答觉得不错:https://zhidao.baidu.com/question/1692690545668784588.html 如果你认为jdk是系统提供给你可选的程序,放在op ...

  2. 2018.06.29 NOIP模拟 边的处理（分治+dp）

    边的处理(side.cpp) [问题描述] 有一个 n 个点的无向图,给出 m 条边,每条边的信息形如<x,y,c,r><x,y,c,r><x,y,c,r>. 给出 ...

  3. 17 Privacy Lost:Dose Anybody Care ? 失去隐私，有人在乎吗 ？

    Privacy Lost:Dose Anybody Care ? 失去隐私,有人在乎吗 ? ①Someday a stranger will read your e-mail without your ...

  4. Spring3.x错误---- Cannot proxy target class because CGLIB2 is not available. Add CGLIB to the class path or specify proxy interfaces.

    Spring3.x错误: 解决方法: 缺少cglib的包, 下载地址: http://sourceforge.net/projects/cglib/files/latest/download?sour ...

  5. 使用百度webuploader实现大文件上传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  6. 通过wsdl生成client 的几种方式

    wsimport 位置 %JAVA_HOME%/bin/wsimport.exe 帮助 wsimport -help Usage: wsimport [options] <WSDL_URI> ...

  7. matlab练习程序（生成希尔伯特曲线）

    能够使用这样一条线遍历图像中所有的像素,不过这里没有这样做,而只是生成了这样一条曲线. 程序中h,w是最终图像的高和宽,n为希尔伯特曲线阶数. 这里如果n等于log2(h)或log2(w),则图像就全 ...

  8. （最小生成树）Jungle Roads -- HDU --1301

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  9. 提高Android和iOS调试编译速度

    http://www.cnblogs.com/findumars/p/7841252.html 提高Android和iOS调试编译速度   如果您使用Delphi开发App,就会遇到:Android和 ...

  10. JavaOperator小框架制作【精品博客】

    以下是运算小框架的制作过程,以及核心代码,完成(计算,监听,回馈等): package com.demo2.operator; /** * 运算标准接口 * @author Liudeli */ pu ...