浅谈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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JavaScript字符串对象
Jan 14 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
js设置默认时间跨度过程详解
Jul 17 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python入门教程之基本算术运算符
2020/11/13 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
音乐剧猫观后感
2015/06/04 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Python学习之包与模块详解
2022/03/19 Python