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 3D 标签云示例代码
Jun 12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
Bootstrap表单布局
Jul 19 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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
PHP写日志的实现方法
2014/11/05 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
微信公众号H5支付接口调用方法
2019/01/10 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python使用正则筛选信用卡
2019/01/27 Python
python开启debug模式的方法
2019/06/27 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python实现word2Vec model过程解析
2019/12/16 Python
什么是makefile? 如何编写makefile?
2013/01/02 面试题
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
小学新课改心得体会
2016/01/22 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Python使用openpyxl批量处理数据
2021/06/23 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers