心得:

style也是一个标签,那么也可以使用css对其进行编辑


html5新属性 contenteditable,可以让标签元素处于可编辑状态,对于style标签也适用

为了不影响head标签里的style标签,如此写

body style {
}

最后代码为:

body style {
display: block;
padding: 0.6em 0.8em;
border: 1px dashed #ccc;
background-color: #f5f5f5;
color: #000;
font-family: Monaco, monospace;
font-size: 12px;
white-space: pre-wrap;
word-wrap: break-word;
}
<style contenteditable>.test_images{padding: 3px; border: 1px solid #ccc; background-color: #fff;}</style>

感谢张鑫旭大大,转自http://www.zhangxinxu.com/wordpress/?p=1488

style标签进行实时编辑及修改css(转)的更多相关文章

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

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

  2. css style 标签可编辑

    一次偶然在鑫大技术博客上发现  style  标签配合contenteditable 可编辑属性 实现动态编辑css 这里我就回顾了下  contenteditable  可编辑属性 (这个属性并无浏 ...

  3. CSS实时编辑显示

    方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...

  4. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

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

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

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

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

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

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

  8. 廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

    拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...

  9. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

随机推荐

  1. 【DB2】If 'db2' is not a typo you can run the following command to lookup the package that contains the binary: command-not-found db2 bash: db2: command not found

    数据库安装以后,db2报错如下: If 'db2' is not a typo you can run the following command to lookup the package that ...

  2. Java 变长參数Varargs

    Varargs (variable arguments)可变长參数是Java 1.5引入的特性. 方法的形參如print(String ... s),实參为随意数目的值. public class V ...

  3. oracle将一个表中字段的值赋值到另一个表中字段(批量)

    面积表中数据错误,现将面积表中的sfmj字段的值改为居民信息表中匹配字段的值 update (select s.name name1,s2.name name2 from simple s,simpl ...

  4. 学会Git玩转Github笔记(二)——Git使用

    一.Git基本工作流程 Git工作区域 向仓库中添加文件流程 二. Git初始化及仓库创建和操作 基本信息设置 . 设置用户名 git config --global user.name 'itcas ...

  5. C语言-二进制技巧

    打开位: flags = flags | MASK 要打开的位为 1 关闭位: flags = flags & ~MASK 要关闭的位为 1 转置位: flags = flags ^ MASK ...

  6. C# EF更新当前实体报错 ObjectManager无法管理具有相同键值的多个对象

    原因: ObjectManager已经在跟踪此对象 更新实体前判断 if (db.Entry<T>(t).State != EntityState.Modified) db.Entry&l ...

  7. C# EF使用性能消耗列表 https://msdn.microsoft.com/zh-cn/library/cc853327.aspx

    性能注意事项(实体框架) .NET Framework (current version)   其他版本   本主题介绍 ADO.NET 实体框架的性能特征,并提供一些注意事项帮助改善实体框架应用程序 ...

  8. Java 装饰模式(4.4)

    装饰模式(decorator pattern). 依照Num模型.讨论职业/IProfession类层次. IProfession定义了方法say(String),事实上现类教师/ Teacher.医 ...

  9. A Translation for Quaternion 一篇对四元数的翻译

    一篇写的非常好的博客:http://www.cnblogs.com/lookof/archive/2012/02/24/2360749.html

  10. tomcat 工作原理简析

    https://github.com/HappyTomas/another-tutorial-about-java-web/blob/master/00-08.md 在00-02.理解HTTP中给出了 ...