学习浏览器中的JavaScript操作CSS

iwin621
176 阅读3分钟

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

前言

前文学习了关于浏览器中的 JS 之浏览历史-history以及其使用管理方式之pushState() 和hashchange事件, 本文继续来学习浏览器中的 JS -

其实好多让我们方便省心使用的库/框架底层都是 JS 基础的封装, 比如各种路由的封装.通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:

浏览器中的JS-操作CSS

对于 JavaScript 操作 DOM 我们可能都特别熟悉, 而 JavaScript 也可以对 CSS 进行操作, 也可以来控制文档的布局外观. 可能这方面用的是不太多, 比如 JavaScript 实现动画、实现gif图效果等等..

常见的通过 JavaScript 改变CSS样式

  1. 设置 display样式(常用)
  2. position位置 动态改变元素的位置, (如: 动画实现)
  3. transform 样式 来移动/缩放/旋转元素(如掘金个人头像 悬停旋转)
  4. transition 样式, 可动态改变其他 CSS 样式. 动画由浏览器处理, 可通过 JavaScript 来启动一个动画.

JavaScript操作CSS

1. JS 操作 tooltip

操作 1. display 来显示 tooltip提示框的位置等样式:

function showAt(tooltip, x, y) {
  // 显示
  tooltip.display = 'block'
  tooltip.position = 'absolute'
  tooltip.style.left = `${x}px`
  tooltip.style.top = `${y}px`
}

2. JavaScript 动画

CSS 动画: CSS transitions 提供了一个简单的的方式去创造当前样式与结束状态样式之间的动画, 可用于一些简单的动画.

动画的渲染工作是浏览器的活. 浏览器可以优化渲染流程。我们总是可以尽可能通过CSS过渡/动画创建动画。如果我们的动画真的很复杂，那可能不得不依赖于JavaScript动画。

相关更文阅读

  1. JavaScript 学习理解-Number-这是一个函数

  2. JS 学习理解-自动类型转换

  3. JavaScript 中的中缀运算符

  4. 你知道 JavaScript 的 typeof 是什么吗?

  5. 学习 JavaScript 中几个代表性事件(Event)

  6. 学习理解客户端 JavaScript-事件分类(一)

  7. 理解浏览器中的 JavaScript-事件注册

  8. 浏览器中的 JavaScript-fetch()网络请求方法

  1. HTTP 响应代码
  2. 浏览器中的 JS-WebSocket 通信(一)
  3. 学习浏览器中的 JS-WebSocket 发送接收消息(二)
  4. 学习浏览器中的 JS-存储的分类(一)
  5. 浏览器中的 JS-history
  6. JS-history-hashchange
  7. JS-history-pushState()

Calm Down & Carry On!

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大! 加油!

参考内容

avatar
文章
阅读
粉丝