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 Prototype对象
Jan 07 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
鼠标图片振动代码
2006/07/06 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
详解vue axios二次封装
2018/07/22 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
活动总结格式范文
2014/04/26 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
实习协议书
2015/01/27 职场文书
活着观后感
2015/06/03 职场文书
正规欠条模板
2015/07/03 职场文书
深入理解python协程
2021/06/15 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python