大前端基础

xiao_zhudage

于 2022-07-19 21:53:14 发布

阅读量275

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/xiao_zhudage/article/details/125881908

版权

// 昂 课 里 课
    // onclick 点击

    // 额 乐（ 儿） 特
    // alert(1);
    // 弹窗

    // 康 搜  
    // 啃 搜  
    console.log(111111);
    打印

    // da 课 油 门 特
    // document 整个文档、页面

    // 盖 特
    // get 得到、获取

    // 爱 了 门 次
    // Elements 元素复数（很多个）

    // 拜
    // by  通过

    // 泰 格  内 木
    // TagName 标签名


    // 歪 六
    // value  值

    // 方 课 神
    // function 函数

 // ruai  特
    // write  写

 // 衣 哪儿   HTML
innerHTML  内容

// 衣 哪儿  太 课 思 特    文本
    innerText  内容

2、document.write()

语法：document.write(message)-- 数值-- 文字---标签
作用：在页面写入内容(操作的是body标签)

可以识别标签

document.write('你好');
document.write('<h1>你好h1标签</h1>');
document.write(1111);

3、JavaScript 元素操作

元素操作可以分为：内容操作，属性操作，样式的操作等

每种操作都分为读（获取）和写（设置）的操作

内容操作

1. 双标签元素的内容操作

双标签元素的内容操作
        1.innerHTML 覆盖原来的内容 会识别标签
           读：元素.innerHtml;
           写：元素.innerHTML=值;

        2.innerText 覆盖原来的内容 不会识别标签
          读： 元素.innerText;
          写： 元素.innerText=值;
    
          innerText和innerHTML的区别
          1. innerText和innerHTML都会覆盖原来的内容
          2.innerHTML会识别标签
          3.innerText不会识别标签

// 1.获取div的内容
    // 衣 哪儿   HTM
    console.log(div.innerHTML);
    // 太 课 思 特 文本
    console.log(div.innerText);

    console.log(h1.innerHTML);

    // 设置内容  元素.innerHTML

    // 会覆盖原来的内容
    h2.innerHTML = '靓仔是个暖男';
    h2.innerHTML = '靓仔是个直男';

    btn.innerHTML = '胡总是个钢铁猛男';

    p.innerText = '李总真的是个好领导';


// 设置标签内容
    // innerHTML可以识别标签
    h2.innerHTML = '<i>斜体标签</i>';


    // innerText 不可以识别标签，标签会作为内容输出
    h3.innerText = '<i>斜体标签</i>';

2. 样式操作

样式（操作的行间样式）
```
width height background ....
```
语法

样式操作
        设置：元素.style.样式名=值;
        获取： 元素.style.样式名  
        注意：只能获取行间的样式

        在js中不允许出现background - color这种连字符的属性，都需要使用驼峰标识来替代
        样式中有-的,要转成驼峰
        例如：background - color --- backgroundColor
             font-size ---- fontSize

// 获取样式
// 获取元素的字体颜色
console.log(div.style.color); //空，获取不到，因为只能获取行间样式


// 获取宽度
console.log(div.style.width); //200px
console.log(div.style.height); //250px
// 背景颜色
// console.log(div.style.background - color); //color is not defined

// js中获取样式的时候不允许出现连字符-，需要转为小驼峰

// background - color ：  backgroundColor

console.log(div.style.backgroundColor); //brown

// 获取字体大小 font-size  fontSize
console.log(div.style.fontSize); //30px


// 设置样式
div.style.backgroundColor = 'teal';
div.style.backgroundColor = '#ff0';
div.style.backgroundColor = 'rgba(100,100,100,.8)';

div.style.width = '300px';
div.style.height = '300px';