浅谈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 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
js的对象与函数详解
2019/01/21 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python 多维List创建的问题小结
2019/01/18 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Java面向对象面试题
2016/12/26 面试题
专科文秘应届生求职信
2013/11/18 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
JS代码编译器Monaco使用方法
2021/06/11 Javascript
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript