浅谈document.write()输出样式


Posted in Javascript onMay 07, 2015

js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容——document.write("content"),这里content就是需要输出的内容;当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量。

既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式。第一种控制方法是应用内部添加样式的方法,比如

document.write("<font size="+0">=font-size:20px;font-family= Helvetica;"content"</font>"

果里面需要添加的样式太多,那么不仅显得臃肿,而且修改起来也不会方便。

这种情况下肯定用选择器肯定会感觉爽一些。不过由于用选择器的时候要用到各种双引号单引号,所以在使用的时候应该注意防止双引号和单引号的提早匹配,我避免的方法是用 \" 去提醒浏览器不要过早的匹配,例子如下:

document.write("<div id=\"ok\">"+percentage+"</div>");

这里定义了一个名叫ok的ID选择器去控制样式,因id名需要用双引号括起来,所以为了避免和前面的双引号匹配,就用 \" 给它声明一下,然后在CSS文件里面

#ok{style;}

就可以去定义自己想要的样式和位置了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
javascript arguments使用示例
Dec 16 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
php中socket的用法详解
2014/10/24 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
java解析json方法总结
2019/05/16 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
利用python程序生成word和PDF文档的方法
2017/02/14 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python flask框架端口失效解决方案
2020/06/04 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
大二自我鉴定范文
2013/10/05 职场文书
高中生学习生活的自我评价
2013/10/09 职场文书
自我评价的范文
2014/02/02 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript