心得:

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. Python之基础数学知识

    一.线性代数 1.求转置 import numpy m = numpy.mat([[1, 2], [3, 4]]) print("Matrix.Transpose:") print ...

  2. angularJS 使用自定义指令输出模板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  3. docker运行环境安装-centos(一)

    在这里我们使用的是docker的社区版Docker CE,针对的是未安装docker的新的主机,如果安装过docker的早期版本,先卸载它们及关联的依赖资源,安装的版本为docker 18.03. 1 ...

  4. Linux 基础学习(第二节)

    free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...

  5. jfinal的configPlugin基本配置代码

    直接上代码: public void configPlugin(Plugins me) { // 这里是在数据库的配置文件中读取数据库的一些信息 DruidPlugin dbPlugin = new ...

  6. [docker]docker日志驱动记录nginx日志情形探究

    这里研究下容器nginx记录日志的集中情况,主要想弄明白,docker的日志--log-driver=fluentd 改成fluentd后,会不会在本地在记录一份日志 整体架构是这样的 情况1: 首先 ...

  7. (2.0)Smali系列学习之Smali语法

    一.smali的包中信息 .class  public Lcom/aaaaa;.super  Lcom/bbbbb;.source "ccccc.java" 1.它是com.aaa ...

  8. mongodb 安装部署说明

    mongodb.conf 配置文件 # Where the databases will be stored dbpath=/usr/local/mongodb/mongodb-/data/db # ...

  9. CCNA2.0笔记_OSPF v2

    OSPF(开放最短路径优先)协议概述: - 链路状态路由协议 - 无类路由协议 - 要点:RouterID.区域ID - 触发更新 .以传播 LSA 代替路由表更新 - 快速响应变更(比距离矢量路由协 ...

  10. SpringBoot+Shiro引起事务失效、错误原因、解决方法

    一.问题今天发现用户注册的Service的事务并没有起到作用,再抛出一个RuntimeException后,并没有发生回滚,下面是调试步骤: 1.检查数据库的引擎是否是innoDB 2.启动类上是否加 ...