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面板来查看源代码,它不 ...
随机推荐
- 13-spring学习-class类型表达式
Class表达式 spring中对于class反射机制也有自己的处理. 1,class::使用T(类名)的形式可以取得一个指定泛型类型的Class对象. 范例: package com.Spring. ...
- jBoss修改端口号
http://blog.csdn.net/ghost_t/article/details/5708991 jBoss版本: jboss-5.1.0.GA jboss-6.0.0.Final j ...
- mysql表属性、索引、约束
1.表属性 创建表的基本语法: create table [if not exists] 表名 (字段列表 [,索引或约束列表])[表选项列表] 其中,字段列表格式如下: 字段名 类型 [属性列表], ...
- PHPExcel_Reader_Exception: is not recognised as an OLE file in Classes问题解决方法
$filename="student.xlsx";//指定excel文件 $temp=substr($filename,strpos($filename,"." ...
- etymology-F
forsake [fə'seɪk] vt.放弃:断念. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400 ...
- Android---Handler消息处理机制
搞Android的人都知道.android是不同意你在子线程中更新UI操作的.这主要出于线程安全方面的考虑.通常的做法是在主线程中创建一个Handler对象,在子线程中创建一个Message对象.该M ...
- memcache基础知识-stats参数
安装memcache: #tar -xvf libevent-1.4.13-stable.tar.gz#cd libevent-1.4.13-stable#./configure && ...
- Android Studio公布到Jcenter
1.前言 拥抱开源.热爱开源,将我们觉得不错的代码开源到gihtub.将我们的库公布到jcenter\mevan等. 2.准备工作 2.1 准备 申请仓库账号 注意model为android libr ...
- uva 10808 - Rational Resistors(基尔霍夫定律+高斯消元)
题目链接:uva 10808 - Rational Resistors 题目大意:给出一个博阿含n个节点,m条导线的电阻网络,求节点a和b之间的等效电阻. 解题思路:基尔霍夫定律,不论什么一点的电流向 ...
- JNI调用实例
1. 环境 Windows7-64Bit VS2010-32Bit JDK1.8-64Bit 2. 步骤 2.1 创建NativePrint类 public class NativePrint { p ...