在写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. java Html&JavaScript面试题:用table显示n条记录,每3行换一次颜色,即1,2,3用红色字体,4,5,6用绿色字体,7,8,9用红颜色字体。

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 廖老师git教程执行"git checkout -b dev origin/dev"命令报出:fatal: Cannot update paths and switch to branch 'dev' at the same time. Did you intend to checkout 'origin/dev' which can not be resolved as commit?问题解决

    在学习廖老师git教程之多人协作模块时按照老师的操作先创建了另一个目录,然后在这个目录下从GitHub上clone了 learngit目录到这个目录下,同样的执行了git branch查看分支情况,确 ...

  3. 6- vue django restful framework 打造生鲜超市 -完成商品列表页(下)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页下 drf中的request和response drf对于django的 ...

  4. 【Ecshop】修改处理用户购物车的行为

    Ecshop v2.7.3的购物车处理方面在现在看来有比较反用户体验的设计: 用户未登录时加入购物车的商品,在用户登录后会被清空而不是加入到登录用户的购物车中: 用户登录后加入购物车的商品,在退出后会 ...

  5. vue插件库

    各种vue插件,各种有,总有一款适合你! github地址:https://github.com/opendigg/awesome-github-vue

  6. JS的四舍五入问题

    最近踩了一个坑,mark一下toFixed四舍五入问题,详见代码: var myFixed = function(num, fix) { num = (parseFloat(num) * + ) / ...

  7. SourceTree 跳过登录注册,直接使用

    SourceTree下载安装后,运行程序会要求你登录或注册账号才能使用, 然而登录或注册基本都收不到服务器的响应 (在国外嘛,安全起见),于是卡在此处无法使用了. 下面就来介绍一下跳过这尴尬环节的方法 ...

  8. 09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. Java List 的深拷贝

    老是会遇到深拷贝与浅拷贝的问题,这里进行了一些測试.代码例如以下: </pre><pre name="code" class="java"&g ...

  10. Nearest Common Ancestors POJ - 1330 (LCA)

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 34657   Accept ...