心得:

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. oracle update left join查询

    对于有的更新语句,要更新的表可能条件不够,需要用到left join关联其他表, 但是不能直接关联,否则报错:错误如下: update imim_gireqbillitems gi left join ...

  2. 捕获海康威视IPCamera图像,转成OpenCV能够处理的图像(一)

    海康威视IPCamera图像捕获 捕获海康威视IPCamera图像,转成OpenCV能够处理的IplImage图像(一) 捕获海康威视IPCamera图像.转成OpenCV能够处理的IplImage图 ...

  3. CSS3Transition添加多个过渡效果

    本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/ 通过监听动画的结束事件,可以为一个元素添加多个动 ...

  4. 安装应用程序 报“ 997 重叠 I/O 操作在进行中”错解决办法

    解决办法: 原因: Per Microsoft's blog, patch KB2918614 appears to have caused installation issues 按照微软的博客,补 ...

  5. Windows未能启动,原因可能是最近更改了硬件或软件,解决此问题的步骤

    电脑开机出现显示这样一段文字"Windows未能启动,原因可能是最近更改了硬件或软件,解决此问题的步骤":出现问题的界面是这样的 步骤如下: 1.直接按"Enter&qu ...

  6. 怎样使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...

  7. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  8. 并且需要用websocket实时接收数据 VS 组件ng2websocket的

    chart.service.ts: import { Injectable } from '@angular/core'; import { WebSocketService } from './we ...

  9. 图解PCIE原理(从软件角度)

    1  PCIE基本概念 1.1   PCIE拓扑架构图 1.2 PCIE Switch内部结构图 1.3  PCIE协议结构图 2 PCIE枚举原理 2.1 Type0&Type1配置头空间 ...

  10. [svc][op]从历险压缩日志里网站pv uv统计

    http://myhoop.blog.51cto.com/5556534/1367523 tomcat日志格式: http://www.cnblogs.com/anic/archive/2012/12 ...