JavaScript中的字符串的内置功能（一）_write输出缩小字体-CSDN博客

本文链接：https://blog.csdn.net/weixin_47075145/article/details/125626926

基础知识：

01.获取页面上的元素

02.元素对象的属性innerHTML修改元素内容

03. document.write

String HTML 包装方法

文章引用的是菜鸟教程中的内容，更多具体实例看链接：

字符串的内置方法在原型链上。

基础知识：

01.获取页面上的元素

document.querySelector 页面元素/标签选择器

<body>
    <!-- div元素中内容为 666 -->
    <div class="box1">666</div>
    <script>
        //获取页面上特定的元素   document 文档  querySelector 查询选择器
        //小括号里面的是选择器，这里是类选择器，将选中的元素存在一个变量box里面，并打印
        var box = document.querySelector(".box1");
        console.log(box);
    </script>
</body>

结果：打印出了选择器为 .box 类选择器的元素/标签

02.元素对象的属性innerHTML修改元素内容

可以知道，这个变量box指的就是 元素对象div，div有个属性innerHTML，它的作用是给div内容区写内容。

eg：原来div内容是666

通过box.innerHTML改一下内容：

<body>
    <!-- div元素中内容为 666 -->
    <div class="box1">666</div>
    <script>
        //获取页面上特定的元素   document 文档  querySelector 查询选择器
        //小括号里面的是选择器，这里是类选择器，将选中的元素存在一个变量box里面，并打印
        var box = document.querySelector(".box1");
        console.log(box);
        box.innerHTML = "hello,girl!"
    </script>
</body>

结果为：将原来div中内容 666改为了 hello，girl！

注意：var str = "这在引号里面的叫字符串"，但是写在 innerHTML ="这个引号里面的不叫字符串了，叫代码"

所以：写在innerHTML中的标签也会在页面中产生效果 （要注意：该元素里面能否嵌套该标签:例如：div标签中可以嵌套h标签）

<body>
    <!-- div元素中内容为 666 -->
    <div class="box1">666</div>
    <div class="box2">999</div>
    <script>
        //获取页面上特定的元素   document 文档  querySelector 查询选择器
        //小括号里面的是选择器，这里是类选择器，将选中的元素存在一个变量box里面，并打印
        var box = document.querySelector(".box1");
        var boxx = document.querySelector(".box2");
        console.log(box);
        console.log(boxx);
        //这里相当于<div class="box1">hello,girl!</div>
        box.innerHTML = "hello,girl!"
        //这里相当于<div class="box2"><h1>hello,girl!</h1></div>
        boxx.innerHTML = "<h1>hello,girl!</h1>"  
    </script>
</body>

结果是：innerHTML引号里面的标签h1起了效果，使得字体像h1标题那样变大。

03. document.write(把字符串打印到页面上)

这个命令简单地打印指定的文本内容到页面上。为了逐字打印文本，在打印的文本字符串加上单引号。例如：

document.write('Hello World!');

同时,也可以使用document.write 打印变量。输入变量名称不加上引号，如下：

var txt = "Hello again";
document.write(txt);

注意：如果变量名称加上引号，将会打印出变量名称（不会打印变量值）。你可以使用“+”符号来连接变量值和文本字符串(字符串的拼接)。（可以把标签里面的内容根据标签显示出对应效果）

var colour1 = "purple";  
var colour2 = "pink";
document.write('<p>colour1: ' + colour1 + '<br>colour2: ' + colour2 + '</p>');

打印结果如下：

colour1: purple
colour2: pink

String HTML 包装方法

HTML 返回包含在相对应的 HTML 标签中的内容。

以下方法并非标准方法，所以可能在某些浏览器或者某些浏览器版本下不支持。

方法	描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
italics()	使用斜体显示字符串。
link()	将字符串显示为链接。
small()	使用小字号来显示字符串。
strike()	用于显示加删除线的字符串。
sub()	把字符串显示为下标。
sup()	把字符串显示为上标。

注意点1：字符串.big()返回结果是一个字符串（其它一系列内置函数返回结果也是字符串）

   <script>
    var txt = "hello";
    var re = txt.big();
    console.log(re);        //"<big>hello</big>"
    console.log(typeof re);//string
   </script>

所以可以进行字符串的拼接。

比如下面这些例子就是运用了字符串的拼接：

<script>
var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");  //颜色用引号引起来
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");         //要设置字体尺寸
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");
</script>

运行结果：

一些字符串内置方法详解：

anchor() 创建HTML锚

注意：a标签有两个说法：

01.锚点 name

实现锚点，a标签中必须有name属性，当点击该标签时，会跳转到id属性值同该标签的name值相同的元素处。

02.链接 href

实现链接，a标签中必须有href属性，并且属性值是合法的url,当点击该标签时,会跳到链接所在页面。

而anchor()就是创建锚点，需要传参语法：string.anchor(name)

<body>
    <div class="box" id="1">999</div>
    <script>
        var box = document.querySelector(".box");
        var str = "hello,美丽女孩";
        var re = str.anchor("http://www.baidu.com");
        box.innerHTML = re;
        console.log(re,str);  
    </script>
</body>

结果为：

link() 将字符串显示为链接

link(),创建链接，括号里面的参数就是要跳转到的页面的地址即：href值

<body>
    <div class="box">999</div>
    <script>
        var box = document.querySelector(".box");
        var str = "hello,美丽女孩";
        var re = str.link("https://www.baidu.com");  //将字符串显示为链接
        box.innerHTML = re;
        console.log(re,str);  //"<a href="https://www.baidu.com">hello,美丽女孩</a>"
    </script>
</body>

结果：点击 hello，美丽女孩，会跳转到百度