一次偶然在鑫大技术博客上发现  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. Android 在一个程序中启动另一个程序(包名,或者类名)

    http://hi.baidu.com/xiaofanqing/item/6fd724f7c5bb6dce531c26b7 Android 开发有时需要在一个应用中启动另一个应用,比如Launcher ...

  2. 2018.10.20 bzoj2748: [HAOI2012]音量调节(背包)

    传送门 这题是不是太sbsbsb了一点. 难度直逼普及-. 直接背包判存在性就行了. 代码: #include<bits/stdc++.h> using namespace std; bo ...

  3. 2018.06.30 BZOJ4443: [Scoi2015]小凸玩矩阵(二分加二分图匹配)

    4443: [Scoi2015]小凸玩矩阵 Time Limit: 10 Sec Memory Limit: 128 MB Description 小凸和小方是好朋友,小方给小凸一个N*M(N< ...

  4. 2018.07.08 POJ 2481 Cows(线段树)

    Cows Time Limit: 3000MS Memory Limit: 65536K Description Farmer John's cows have discovered that the ...

  5. 打开yii2控制台命令

    1.在控制台中切换到yii2控制台入口文件的工作路径.如:C:\users\2016-01>D:www\blogdemo\yii

  6. wadl 的自动生成(cxf版本3.1.1)

    官方文档 http://cxf.apache.org/docs/jaxrs-services-description.html 举例: package cn.zno; import javax.ws. ...

  7. tornado+bootstrap急速搭建你自己的网站

    bootstrap既然是这么的流行又能省很多的事为什么不用他呢?再加上牛X的produced by FB的tornado简直如虎添翼了! 1. 安装配置 安装所需要的库等内容.这里没什么需要多讲的.t ...

  8. day03(接口,多态)

    接口:            概念:是功能的集合,可以当做引用数据类型的一种.比抽象类更加抽象. 接口的成员:               成员变量:必须使用final修饰 默认被 public &a ...

  9. Robotframework 简介及工作原理

    下面通过官网和网上资料来简单介绍下Robotframework及其工作原理. 官方说明: Robot Framework is a generic test automation framework ...

  10. windows下用C++获取本机IP地址

    BSTR CamUtilsCtrl::GET_TERM_IP(void){ AFX_MANAGE_STATE(AfxGetStaticModuleState()); CString strResult ...