心得:

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. css新单位 vw , vh

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  2. 前端工程化 ESlint 配置

    1.使用的标准 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends ...

  3. 01-spring-专题IOC

    接口: 1,用于沟通的中介物的抽象化 2,实体把自己提供给外界的一种抽象化说明,用以内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的方式(内部可能修改了,但是接口不变). 简 ...

  4. B2C电子商务系统研发——产品媒体常见功能点

    产品媒体常见功能点 电商研发系列——产品媒体常见功能点 支持图片.视频和文档等媒体类型 产品图片对清晰度要求比极高,但又不能太大,所以图片一般是jpg格式. 视频一般是flv流媒体格式,如果是嵌入产品 ...

  5. Unix 网络编程 dup和dup2函数

    dup和dup2也是两个很实用的调用,它们的作用都是用来复制一个文件的描写叙述符. 它们经经常使用来重定向进程的stdin.stdout和stderr.这两个函数的原形例如以下: #include & ...

  6. Mybatis学习记录(六)--开发中的小问题

    近期開始做项目,期间遇到一些小问题,开此贴记录一下 1.关于order by 今天写一个sql查询语句,用了order by可是一直没效果,后来才发现用了#{}取值,mybatis使用这个的话对于St ...

  7. centos 7 生成文件名乱码的问题如何解决?

    在应用脚本生成文件时,发现生成的文件名称出现乱码(似麻将一样).刚开始找来找去,以为是复制粘贴的原因,复制时复制了特殊字符导致的,结果修改源文件后发现生成的文件名还是乱码.后来在执行脚本时,提示&qu ...

  8. 【HTML5 WebSocket】WebSocket对象特性和方法

    <HTML5 WebSocket权威指南>学习笔记&3 WebSocket方法的对象特性 1. WebSocket方法 a. send方法 send方法用于在WebSocket连接 ...

  9. weblogic stuck实验2014-11-14

         以往对weblogic stuck认识是: 1.会造成系统总体慢. 2.在weblogic console中线程监控中会有显示. 3.weblogic使用队列处理线程.隔一段时间会扫描线程队 ...

  10. Lintcode---二叉树的前序、中序、后序遍历

    给出一棵二叉树,返回其节点值的后序遍历. 您在真实的面试中是否遇到过这个题? Yes 样例 给出一棵二叉树 {1,#,2,3}, 1 \ 2 / 3 返回 [3,2,1] 思路:二叉树的后序遍历,简单 ...