document.write()及其输出内容的样式、位置控制

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

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

document.write("<font style>=font-size:20px;font-family= Helvetica;"content"</font>"这样，不过如果里面需要添加的样式太多，那么不仅显得臃肿，而且修改起来也不会方便。

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

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

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

#ok{style;}

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

赞 (0)

相关推荐

  • js中document.write的那点事

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

  • 深入document.write()与HTML4.01的非成对标签的详解

    (一)HTML4.01中的非成对标签:注释标签:<!-- 注释内容  --> 严格来讲不算HTML标签的:<!DOCTYPE>文档声明标签 设置页面元信息的:<meta>标签 设置网页所有链接的相对目录(如根目录)的:<base>标签 换行:<br> 水平线:<hr> 图像:<img> 表单元素<input> 在表格table中定义一个或多个列的属性的:<col>标签 定义框架的一个窗口的:<

  • 在网页中使用document.write时遭遇的奇怪问题

    在前些日子的对Razor模板引擎向JavaScript移植进行研究的过程中,我发现如果使用document.write输出的内容中包含了调用外部的JavaScript的<script>标记,就可能出现一点问题--在这里面被调用的外部JavaScript可能会在不适当的时间被执行,对于IE和Opera来说,就是当write的参数中的所有其它部分内容都被解析之后,这些外部的JavaScript才会执行. 而在进一步研究中我又发现,对于Chrome和Safari这两个使用了WebKit网页排版引擎的

  • js document.write()使用介绍

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

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

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

  • document.write的几点使用心得

    一直用document.write()方法向浏览器中显示数据用,把它当做Alert()使用, 看来这样用有些大材小用了,下面说说它的主要用处. document.write()方法可以用在两个方面: 1.页面载入过程中,用脚本加入新的页面内容. 2.用延时脚本创建本窗口或新窗口的内容. 该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言.如下面代码,教务系统框架载入子页 复制代码 代码如下: <!--将框

  • 用js的document.write输出的广告无阻塞加载的方法

    用js的document.write输出的广告无阻塞加载的方法

    一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java

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

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

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

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

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

  • document.write()及其输出内容的样式、位置控制

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

  • JS document内容及样式操作完整示例

    JS document内容及样式操作完整示例

    本文实例讲述了JS document内容及样式操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnet元素内容和样式操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 单标签属性操作 // 固定属性的操作 function testOper1(){ // 获取对

  • 用vbs将输出内容写到屏幕以覆盖当前屏幕上的内容的方法

    问: 您好,脚本专家!如何将输出内容写到屏幕以覆盖当前屏幕上的内容? -- KM 答: 您好,KM.如果您确实需要将输出内容写到命令窗口,那么,我们没办法给您提供答案:尽管我们多少已经处理过一些问题,但我们从未找到一种简单.直接的方法可覆盖命令窗口中的信息. 不过,如果您要将信息输出到 Internet Explorer 窗口,那么我们还确实有解决办法.而且马上就可以给出答案: Set objExplorer = CreateObject("InternetExplorer.Applicatio

  • JavaScript弹出新窗口后向父窗口输出内容的方法

    本文实例讲述了JavaScript弹出新窗口后向父窗口输出内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open方法打开一个弹出窗口,然后通过弹出窗口的句柄向父窗口输出信息的方法 <!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow

  • 在python中利用dict转json按输入顺序输出内容方式

    一般常规的我们保存数据为dict类型时,系统会自动帮我们排序:但有时我们想按照输入顺序的key:value保存到dict中,而不想要改变顺序,则我们可以通过使用collecions,进行排序. collections是一个python的内建模块. 示例如下: # -*- coding:utf-8 -*- #dic = {} dic = dict() dic['b'] = 1 dic['a'] = 2 dic['b0'] = 3 dic['a1'] = 4 print("dic is:"

  • Python利用prettytable实现格式化输出内容

    Python利用prettytable实现格式化输出内容

    目录 楔子 添加表头.添加行.添加列 输出指定行.指定列 设置表格样式 设置对齐方式 设置边框样式 楔子 我们用 MySQL 客户端查询数据的时候,是以下面这种格式显示的: 内容展示的非常漂亮,而 Python 有一个第三方模块叫 prettytable,专门用来将数据以上面这种格式输出,我们来看一下用法. 添加表头.添加行.添加列 类似于数据库中的表,由表头(或者说字段名),以及每一行的内容组成. from prettytable import PrettyTable # 传入的 name.a

  • JSP中使用JSTL按不同条件输出内容的方法

    本文实例讲述了JSP中使用JSTL按不同条件输出内容的方法.分享给大家供大家参考.具体如下: ConditionalContentJSTL.jsp页面: <%@ page language="java" contentType="text/html;charset=UTF-8" %> <%@ taglib uri="/WEB-INF/tld/c-rt.tld" prefix="c-rt" %> <

  • Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

    Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

    1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&

  • PHP使用缓存即时输出内容(output buffering)的方法

    PHP使用缓存即时输出内容(output buffering)的方法.分享给大家供大家参考.具体如下: $buffer = ini_get('output_buffering'); echo str_repeat(' ',$buffer+1); //防止浏览器缓存 ob_end_flush(); //关闭缓存 for( $i=1; $i<=10; $i++ ){ echo '第 '.$i.' 次输出.'."<br />\n"; flush(); //刷新缓存(直接发送

随机推荐