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面板来查看源代码,它不 ...
随机推荐
- React.Fragment 包裹标签
在 vue 里,我们会用 <template></template> 标签来包裹一些不能有父容器的复数同级标签. 例如在 <tbody></tbody> ...
- RAC环境下的堵塞(blocking blocked)
RAC环境下的堵塞不同于单实例情形,由于我们须要考虑到位于不同实例的session.也就是说之前查询的v$session,v$lock对应的应变化为全局范围来查找.本文提供了2个查询脚本,并给出实例演 ...
- OpenERP|ODOO高德地图应用
发布时间:2015-04-06 11:01:37来源:http://www.chinamaker.net 在openerp中的fleet模块,每一个车辆都有地图应用.默认采用的是谷歌地图,但是在应用得 ...
- Android so文件生成
http://blog.csdn.net/laczff21/article/details/7542236 http://blog.csdn.net/yhm2046/article/details/8 ...
- nginx做正向代理(Centos7,支持http和https)
默认的情况下,使用nginx做正向代理可以解析http请求, 对于诸如baidu.com这样的https请求,nginx默认并不支持,不过我们可以借助第三方模块来实现. 1.先说默认情况下的代理配置 ...
- iOS 九宫格手势密码
代码地址如下:http://www.demodashi.com/demo/11490.html 一.准备工作 需要准备什么环境 xcode,iOS8+ 本例子实现什么功能 主要实现手势密码设置,验证 ...
- 【Spark】Spark的Standalone模式安装部署
Spark执行模式 Spark 有非常多种模式,最简单就是单机本地模式,还有单机伪分布式模式,复杂的则执行在集群中,眼下能非常好的执行在 Yarn和 Mesos 中.当然 Spark 还有自带的 St ...
- 数据库表syscolumns 各个字段含义 select * from syscolumns where name='textA'
每个数据库创建后都会有一些系统表用来存储该数据库的一些基本信息 每个表和视图中的每列在表中占一行,存储过程中的每个参数在表中也占一行.该表位于每个数据库中. 列名 数据类型 描述 name sysna ...
- 记一次.net core调用SOAP接口遇到的问题
背景 最近需要将一些外部的Web Service及其他SOAP接口的调用移到一个独立的WebAPI项目中,然后供其他.Net Core项目调用.之前的几个Web Service已经成功迁 ...
- redis命令_INCR
INCR key 将 key 中储存的数字值增一. 如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. 如果值包含错误的类型,或字符串类型的值不能表示为数字,那 ...