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 Dialog 弹出层对话框插件
Aug 09 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
node.js中 stream使用教程
Aug 28 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
深入理解vue-loader如何使用
Jun 06 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
js实现验证码功能
Jul 24 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 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
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php session劫持和防范的方法
2013/11/12 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
AngularJS内置指令
2015/02/04 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
分享12个实用的jQuery代码片段
2016/03/09 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
乳制品整治工作方案
2014/05/29 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python