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面板来查看源代码,它不 ...
随机推荐
- oracle update left join查询
对于有的更新语句,要更新的表可能条件不够,需要用到left join关联其他表, 但是不能直接关联,否则报错:错误如下: update imim_gireqbillitems gi left join ...
- 捕获海康威视IPCamera图像,转成OpenCV能够处理的图像(一)
海康威视IPCamera图像捕获 捕获海康威视IPCamera图像,转成OpenCV能够处理的IplImage图像(一) 捕获海康威视IPCamera图像.转成OpenCV能够处理的IplImage图 ...
- CSS3Transition添加多个过渡效果
本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/ 通过监听动画的结束事件,可以为一个元素添加多个动 ...
- 安装应用程序 报“ 997 重叠 I/O 操作在进行中”错解决办法
解决办法: 原因: Per Microsoft's blog, patch KB2918614 appears to have caused installation issues 按照微软的博客,补 ...
- Windows未能启动,原因可能是最近更改了硬件或软件,解决此问题的步骤
电脑开机出现显示这样一段文字"Windows未能启动,原因可能是最近更改了硬件或软件,解决此问题的步骤":出现问题的界面是这样的 步骤如下: 1.直接按"Enter&qu ...
- 怎样使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...
- 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)
把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...
- 并且需要用websocket实时接收数据 VS 组件ng2websocket的
chart.service.ts: import { Injectable } from '@angular/core'; import { WebSocketService } from './we ...
- 图解PCIE原理(从软件角度)
1 PCIE基本概念 1.1 PCIE拓扑架构图 1.2 PCIE Switch内部结构图 1.3 PCIE协议结构图 2 PCIE枚举原理 2.1 Type0&Type1配置头空间 ...
- [svc][op]从历险压缩日志里网站pv uv统计
http://myhoop.blog.51cto.com/5556534/1367523 tomcat日志格式: http://www.cnblogs.com/anic/archive/2012/12 ...