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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
JavaScript中的 new 命令
May 22 Javascript
npm 语义版本控制详解
Sep 10 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
windows下python连接oracle数据库
2017/06/07 Python
有关Python的22个编程技巧
2018/08/29 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书