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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
利用javascript查看html源文件
Nov 08 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
vue实现简单图片上传
Jun 30 Javascript
如何利用js在两个html窗口间通信
Apr 27 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数组函数array_multisort()用法实例分析
2016/04/02 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
实例解析php的数据类型
2018/10/24 PHP
jQuery的一些注意
2006/12/06 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python实现倒计时的示例
2014/02/14 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
对Python中的@classmethod用法详解
2018/04/21 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
报关简历自我评价怎么写
2013/09/19 职场文书
书香校园活动方案
2014/02/28 职场文书
岗位竞聘书范文
2014/03/31 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
会议通知范文
2015/04/15 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书