style不是全局属性，仅对可渲染元素生效；其值须符合CSS语法规范，否则静默丢弃；JS操作时需注意覆盖、驼峰命名及计算样式获取方式。
HTML里没有“全局属性 style”这回事——style 是一个**仅对可渲染元素生效的普通属性**，不是像 id 或 class 那样所有标签都能用、且一定起作用的“全局”属性。
哪些标签上写 style 才真正生效
只有浏览器会尝试绘制（render）的元素，style 属性才可能产生视觉效果。比如：
-
<div>、<p>、<span>、<h1>～<h6>、<button>、<a>这类有默认表现或能承载内容的标签，style有效 -
<html>、<head>、<meta>、<script>上加style，浏览器直接忽略，不报错也不警告 -
<body>能设background-color或font-family，但子元素不会自动继承color——你看到“没变色”，其实是继承机制没触发，不是style失效 -
<section>、<article>这类语义容器本身无默认样式，设background-color可见，但设color不会向下透传，容易误判为“不生效”
style 属性值的合法格式和静默失效点
浏览器把 style 的值当作纯字符串解析，只认 property: value; 这种结构。任何不符合的写法都会被整条丢弃，且不提示错误。
- 必须用短横线命名：
background-color✅，backgroundColor❌（那是 JS 的element.style.backgroundColor写法） - 每条声明后必须加分号：
color: red; font-size: 14px;✅，color: red font-size: 14px;❌（缺分号 → 后续全失效） - 带空格的值必须加引号：
font-family: "Helvetica Neue";✅，font-family: Helvetica Neue;❌ - 单位不能省：
width: 100%;✅，width: 100;❌（会被当无效值丢弃） - 不能写选择器、伪类、媒体查询：
style=":hover { opacity: 0.8; }"或style="@media (max-width:768px){...}"全无效
JS 动态操作 style 时最常踩的坑
用 JavaScript 改 style，不是把 CSS 字符串往里一塞就完事。不同操作方式行为差异极大：
立即学习“前端免费学习笔记（深入）”；
-
el.setAttribute('style', 'color: red;')会**完全覆盖**原有内联样式，之前写的padding、border全丢 - 正确单个赋值：
el.style.color = 'red'（注意驼峰：backgroundColor，不是background-color） - 批量赋值推荐：
Object.assign(el.style, { color: 'red', fontSize: '14px' }) - 清除某项：
el.style.color = ''，不是delete el.style.color -
el.style.color只读取内联值，查不到 class 或外部 CSS 的颜色；要读真实计算值，得用getComputedStyle(el).color
真正容易被忽略的是：DevTools 的 Styles 面板里标着「inline」的那几行，才是实际被解析生效的部分；其余看似写进去了，其实连语法树都没进——它不报错，只沉默丢弃。
