浅谈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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
js选择器全面解析
2016/06/27 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python continue继续循环用法总结
2018/06/10 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
25岁生日感言
2014/01/13 职场文书
银行求职信
2014/05/31 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
公司辞职信模板
2015/05/13 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL