style标签进行实时编辑及修改css(转)
心得:
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(转)的更多相关文章
- style标签下的CSS代码的显示与实时编辑
style标签也是标签 首先设置body style的样式 body style{ display:block; padding:0.6em 0.8em; border:1px dashed #ccc ...
- css style 标签可编辑
一次偶然在鑫大技术博客上发现 style 标签配合contenteditable 可编辑属性 实现动态编辑css 这里我就回顾了下 contenteditable 可编辑属性 (这个属性并无浏 ...
- CSS实时编辑显示
方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- HTML+css基础 标签的起名 style标签 选择器的使用规则
标签的起名: 1. 官方提供的标签名 2. 类名: 用class属性起的名字 3. Id名: 用id属性起的名字 唯一的 我们把这种起名叫选择器 class选择器 id选择器 标签选择器 style ...
- 廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式
拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
随机推荐
- Apache服务器配置https协议/SSL证书的方法
转载于:http://www.server110.com/apache/201309/1542.html
- JBoss目录结构说明
http://www.blogjava.net/livery/articles/262544.html $JBOSS-HOME/bin: 放置各种脚本文件以及相关文件,包括jb ...
- C# 读 xml注释
有这么个需求: 要统计所有的配置文件,这些配置文件都xml格式,并把这些配置写到数据表里,如果有注释要把这些注释写到对应配置对象的描述字段上 <item id="" key= ...
- android之内容提供者解析
该系统有两个应用,比较繁琐.但是内容提供者是android里非常非常重要的一个内容,我们得好好学习下哦.先看效果图,我们提供了四个按钮,点击按钮便会进行相应的操作. 我们先看内容提供者所在的应用,代码 ...
- laravel数据库操作sql语句用Eloquent ORM来构造
现在有查询语句: SELECT users.sNmame, users.iCreateTime, users_ext.iAge, users_ext.sSex FROM users LEFT JOIN ...
- Wpf 自定义控件(1)
1. 新建一个wpf工程,在工程下面新建 一个文件夹themes,在themes下新建两个资源字典文件generic.xaml和PrettySeekBar.xaml generic.xaml ...
- poj Ping pong LA 4329 (树状数组统计数目)
Ping pong Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2302 Accepted: 879 Descript ...
- QT .pro文件 LIBS用法详解
在程序中需要使用到团队其它成员开发的静态库和动态库,起初是知道使用LIBS变量在在.pro文件中指定需要包含的库,但是实际使用的时候却遇到很大麻烦,但其实确实是因为自己看官方文档不太用心造成的. 下面 ...
- HTTP Range header
http://stackoverflow.com/questions/3303029/http-range-header *************************** 58 down vot ...
- asp.net写日志权限问题
asp.net网站程序写不了日志,都是这个原因. 程序池的身份标识,设为内置的网络服务即可.