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的.live()和.die() 使用介绍
Sep 10 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
兼容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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
几个学习PHP的网址
2006/11/25 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python使用opencv驱动摄像头的方法
2018/08/03 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
会计系中文个人求职信
2013/12/24 职场文书
安全检查验收制度
2014/01/12 职场文书
高考励志标语
2014/06/05 职场文书
家长学校培训材料
2014/08/20 职场文书
财政局长个人总结
2015/03/04 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS