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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
功能完善的小程序日历组件的实现
Mar 31 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 程序授权验证开发思路
2009/07/09 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用requests库制作Python爬虫
2018/03/25 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
总裁办公室主任职责
2014/01/02 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA