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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
实例浅析js的this
2016/12/11 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python求离散序列导数的示例
2019/07/10 Python
pygame实现打字游戏
2021/02/19 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
方正Java笔试题
2014/07/03 面试题
便利店促销方案
2014/02/20 职场文书
学校课外活动总结
2014/05/08 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
会计实训总结范文
2015/08/03 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS