在写JS代码的时候,大家可以会发现这样现象:

document.write("   1      2                3  ");
结果:

无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格。

这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成1个空格。

解决方法:

1. 使用输出 html 标签    来解决

document.write("  "+""+"    "+"");
结果:

2. 使用CSS样式来解决

document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
结果:

在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"。

转载:http://www.imooc.com/qadetail/68755

JS 中如何输出空格的更多相关文章

  1. JS中如何输出空格

    JS中如何输出空格 在写JS代码的时候,大家可以会发现这样现象: document.write("   1      2                3  "); 结果: 1 2 ...

  2. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  3. 解决JavaScript中如何输出空格

    在写JS代码的时候,大家可以会发现这样现象:document.write("   1      2                3  ");结果: 1 2 3无论在输出的内容中什 ...

  4. Js 中的输出

    document.write()和window.alert() 1.window.document.write(字符串或者是变量名) 作用:它会在body标签内输出内容 说明: window代表当前浏 ...

  5. JS中,输出1-10之间的随机整数

    <script> document.write(parseInt(10*Math.random())); //输出0-10之间的随机整数 document.write(Math.floor ...

  6. [HTML]在页面中输出空格的几种方式

    JS中如何输出空格 在写JS代码的时候,大家可以会发现这样现象: document.write("   1      2                3  "); 结果: 1 2 ...

  7. Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)

    一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button onclick="javas ...

  8. 在winform中调用js文件并输出结果

    在winform中调用js文件并输出结果默认分类 2007-10-19 16:35:06 阅读25 评论0 字号:大中小 由于项目需要在winform中调一个强大的js,所以把这个tip记录在此: 1 ...

  9. js中关于一个数组中最大、最小值以及它们的下标的输出的一种解决办法

    今天在学习js中的数组时,遇到的输出一个数组中最大.最小值以及它们的下表,以下是自己的解决方法! <script type="text/javascript"> var ...

随机推荐

  1. AngularJS 历经实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. nginx反向代理与正向代理的区别

    http://blog.csdn.net/m13666368773/article/details/8060481

  3. [牛客OI测试赛2]F假的数学游戏(斯特灵公式)

    题意 输入一个整数X,求一个整数N,使得N!恰好大于$X^X$. Sol 考试的时候只会$O(n)$求$N!$的前缀和啊. 不过最后的结论挺好玩的 $n! \approx \sqrt{2 \pi n} ...

  4. 二十七、MySQL 复制表

    MySQL 复制表 如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等. 如果仅仅使用CREATE TABLE ... SELECT 命令,是无法实现的. 本章节将为大家介绍如何完 ...

  5. Python导入模块方法

    import module_name 导入整个模块 from module_name import function_name 导入特定函数 from module_name import funct ...

  6. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  7. JavaScript 日期权威指南

    简介 JavaScript通过强大的对象为我们提供日期处理功能:日期. 本文确实_不是_谈论 Moment.js ,我认为它是处理日期的最佳库,你应该在处理日期时几乎总是使用它. Date对象 Dat ...

  8. Python学习笔记:装饰器

    Python 装饰器的基本概念和应用 代码编写要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已 ...

  9. 2015-2016 Northwestern European Regional Contest (NWERC 2015)

    训练时间:2019-04-05 一场读错三个题,队友恨不得手刃了我这个坑B. A I J 简单,不写了. C - Cleaning Pipes (Gym - 101485C) 对于有公共点的管道建边, ...

  10. navicat常用快捷键及注意事项

    常用快捷键: 1. ctrl + q: 打开新查询窗口 2. ctrl + r: 运行当前窗口内的所有语句 3. ctrl + w: 关闭当前窗口 4. F6: 打开一个mysql命令行窗口 ---- ...