浅谈document.write()输出样式


Posted in Javascript onMay 07, 2015

js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容——document.write("content"),这里content就是需要输出的内容;当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量。

既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式。第一种控制方法是应用内部添加样式的方法,比如

document.write("<font size="+0">=font-size:20px;font-family= Helvetica;"content"</font>"

果里面需要添加的样式太多,那么不仅显得臃肿,而且修改起来也不会方便。

这种情况下肯定用选择器肯定会感觉爽一些。不过由于用选择器的时候要用到各种双引号单引号,所以在使用的时候应该注意防止双引号和单引号的提早匹配,我避免的方法是用 \" 去提醒浏览器不要过早的匹配,例子如下:

document.write("<div id=\"ok\">"+percentage+"</div>");

这里定义了一个名叫ok的ID选择器去控制样式,因id名需要用双引号括起来,所以为了避免和前面的双引号匹配,就用 \" 给它声明一下,然后在CSS文件里面

#ok{style;}

就可以去定义自己想要的样式和位置了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python如何变换环境
2020/07/21 Python
python 决策树算法的实现
2020/10/09 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
新学期开学标语
2014/06/30 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Python列表的索引与切片
2022/04/07 Python