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.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
Json实现传值到后台代码实例
Jun 30 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python异常处理和日志处理方式
2019/12/24 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
工作失误检讨书范文大全
2014/01/13 职场文书
思想品德自我评价
2014/02/04 职场文书
军训学生自我鉴定
2014/02/12 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
高中语文课后反思
2014/04/27 职场文书
服务员岗位职责范本
2015/04/09 职场文书
紧急迫降观后感
2015/06/15 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python