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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中数字、字符与对象判断函数用法实例
2014/11/26 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
详解CSS故障艺术
2021/05/25 HTML / CSS
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android