document.write()及其输出内容的样式、位置控制


Posted in Javascript onAugust 12, 2013

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

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

document.write("<font style>=font-size:20px;font-family= Helvetica;"content"</font>"这样,不过如果里面需要添加的样式太多,那么不仅显得臃肿,而且修改起来也不会方便。

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

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

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

#ok{style;}

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

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 #Javascript
Js点击弹出下拉菜单效果实例
Aug 12 #Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 #Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 #Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 #Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 #Javascript
You might like
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
php实现简易计算器
2020/08/28 PHP
js压缩利器
2007/02/20 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python如何求解两数的最大公约数
2018/09/27 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
STP的判定过程
2012/10/01 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
创意广告词
2014/03/17 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
田径运动会通讯稿
2015/07/18 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python