浅谈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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JS功能代码集锦
May 04 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JS实现继承的几种常用方式示例
Jun 22 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
原生JavaScript实现进度条
Feb 19 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
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
js实现tab切换效果
2017/02/16 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
python文本数据相似度的度量
2018/03/12 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python实现对变位词的判断方法
2020/04/05 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
水利水电专业自荐信
2014/07/08 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
求职导师推荐信范文
2015/03/27 职场文书
电力工程合作意向书
2015/05/11 职场文书