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设置和去除disabled属性的5种方法总结
May 16 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
Vue+Django项目部署详解
May 30 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue中轮训器的使用
2019/01/27 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
用python计算文件的MD5值
2020/12/23 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
日语专业个人的求职信
2013/12/03 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
Python中文纠错的简单实现
2021/07/07 Python