浅谈document.write()输出样式

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;}

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

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

赞 (0)

相关推荐

  • document.open() 与 document.write()

    document.open()  打开一个新的空白文档,在IE下,open有两个默认参数,相当于document.open("text/html",'""),第二个参数只有一个值可选:replace,如果启用了该值,则新建的文档会覆盖当前页面的文档(相当于清空了原文档里的所有元素,且不能后退即,浏览器的后退按钮不可用): 看一个例子: ") document.close(); document.open("text/html",&quo

  • JavaScript中使用document.write向页面输出内容实例

    document.write 命令向页面输出文字 本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字,代码如下: 复制代码 代码如下: <script type="text/javascript"> document.write("我是向页面输出的文字!"); </script> 将上面部分代码,用文本编辑器保存为 write.html(或 write.htm).双击 write.html 运行它(实

  • js document.write()使用介绍

    在载人页面后,浏览器输出流自动关闭:在此之后,任何一个对当前页面进行操作的document.write()方法将打开-个新的输出流.它将清除当前页面内容(包括源文档的任何变量或值).因此．假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量.使用一个document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作. 关于document.write()方法还有一点要说明的是它的相关方法docu

  • document.write与writeln的输出内容区别说明

    document.write与writeln的输出内容区别说明

    document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符 document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行 document.write()和document.writeln都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别,除非是输出到pre或xmp元素内 测试一下: with(window.open()){

  • 第一个JavaScript入门基础 document.write输出

    如果你有编程基础,学习Javascript是一件很容易的事情,如果你没有编程基础,也不要担心,我们会为你解释每一行代码. 复制代码 代码如下: <html> <body> <script type="text/javascript"> document.write("This is my first javascript"); </script> </body> </html> 我们将跳过HTM

  • js中document.write使用过程中的一点疑问解答

    本人是新手,所以就记录下来了.这个答案是在百度中看到的,所以算是转载. 下面的内容解答了何为如果在页面加载完后如果调用document.write就会覆盖整个文档. 提示中的 [HTML 输出中] 指的是当页面加载的时候. 复制代码 代码如下: <html> <head></head> <body> <script type="text/javascript">document.write("<p>Hel

  • 浅谈document.write()输出样式

    js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容--document.write("content"),这里content就是需要输出的内容:当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量. 既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式.第一种控制方法是应用内部添加样式的方法,比如 复制代

  • 浅谈layer的Icon样式以及一些常用的layer窗口使用方法

    本文搜集的是本人在实际开发中所用到的layer窗口,未用到的layer按钮,请参考layer官网:http://layer.layui.com/ 一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do something alert("确认"); layer.close(index); }); 二.询问框 官方案例: //询问框 layer.confirm

  • 浅谈react 同构之样式直出

    浅谈react 同构之样式直出

    前言 上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作,这篇文章就讲解一下如何让样式像html一样直出. PS: 直出,我的理解就是输入url发起get请求访问服务端,直接得到完整响应结果,而不是同过ajax异步去获取. React 同构的关键要素 完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键. DOM 的一致性 在前后端渲染相同的 Compponent,

  • 浅谈$(document)和$(window)的区别

    首先 $(document)这个是获取文档对象 $(window)这个是获取窗口对象,也就是浏览器客户区 给大家举个例子就非常直接明了了 $(document).height() $(window).height() 注意,让网页有滚动条 然后输出一下这两个值得大小,你就知道什么区别了 以上所述就是本文的全部内容了,希望大家能够喜欢.

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 浅谈Python 字符串格式化输出(format/printf)

    Python 字符串格式化使用 "字符 %格式1 %格式2 字符"%(变量1,变量2),%格式表示接受变量的类型.简单的使用例子如下: # 例:字符串格式化 Name = '17jo'   print 'www.%s.com'%Name   >> www.17jo.com Name = '17jo' Zone = 'com' print 'www.%s.%s'%(Name,Zone) >> www.17jo.com 字符串格式化时百分号后面有不同的格式符号,代表

  • 浅谈js for循环输出i为同一值的问题

    1.最近开发中遇到一个问题,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> </head> <body> <p>1<

  • 浅谈vue中document.getElementById()拿到的是原值的问题

    问题 两个界面都有id="test"的div,内容不同,路由切换的时候document.getElementById()拿到的是原界面的值. 问题代码 // 页面1 <div id="test">aaa</div> // 页面2 <div id="test">bbb</div> // 路由切换如下: <transition name="card-fade"> <

  • 浅谈C++中char型变量的地址输出

    浅谈C++中char型变量的地址输出

    在刚开始学习C/C++过程中,我们希望输出各个变量的地址来窥探一些我们"百思不得其解"的现象,例如搞清函数堆栈相关的程序内部秘密. 先看下面示例: #include<stdio.h> #include<iostream> using namespace std; class TestArrange { public: long m_lng; char m_ch1; TestArrange() { m_lng = 0; m_ch1 = 'a'; m_int = 0

  • 浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)

    实例如下: <?php /*分治法--直接选择 比如说a b c 首先将a之后的字符依次与a进行交换 1 b,a,c 2 c,b,a 注意这里少了一个原始数据 a,b,c.需要把原始数据也算如排列中 3 a,b,c 然后把字符移到第二个位置,将第二个位置之后的数分别与第二个位置的数进行交换 1 b,a,c ===> 11 b,c,a 2 c,b,a ===> 21 c,a,b 3 a,b,c ===> 31 a,c,b **/ function zuhe($arr,$begin){

随机推荐