在动态界面里，给 <ul> 或 <ol> 换标记符号不一定非要回到样式表。JavaScript 的 style 对象里就藏着 listStyleType 这个属性，它和 CSS 的 list-style-type 几乎同名，但读取和写入的规则并不完全一样。下面从语法、上手体验到长期维护，把它拆开讲透。

一、语法与取值：先搞清楚它能读什么、能写什么

listStyleType 挂在元素的 style 对象上，访问方式为 element.style.listStyleType。它对应 CSS 属性 list-style-type，但 DOM 走的是内联样式通道。也就是说，只有当元素的 style 属性里明确写过 list-style-type: square; 时，element.style.listStyleType 才能读到字符串 square。如果样式来自单独的 CSS 文件或 <style> 标签，即使页面上的列表已经显示成方块，这项属性通常仍返回空字符串。这是新手最容易误解的地方。

可写的值和 CSS 规范一致。无序列表常用 disc、circle、square；有序列表常用 decimal、decimal-leading-zero、lower-alpha、upper-alpha、lower-roman、upper-roman；另有 none 用于移除标记。赋值时直接给字符串，例如 element.style.listStyleType = 'square';。如果传了浏览器不认识的值，整条声明会被忽略，不会报错，但也不会生效。

下面是一段基础读写示例：

// 获取第一个 ul 元素
const ul = document.querySelector('ul');
// 读取当前内联的列表标记类型
console.log(ul.style.listStyleType); // 可能为空字符串
// 设置为方块
ul.style.listStyleType = 'square';
// 设置为无标记
ul.style.listStyleType = 'none';

注意属性名是驼峰写法 listStyleType，不要写成连字符的 list-style-type。后者只在 CSS 或 setAttribute 里出现。

二、上手体验：动态切换列表符号的轻量场景

第一个真实场景是任务列表状态切换。比如一个待办清单里，已完成的任务不再需要圆点标记，未完成的任务保留 disc。如果每个状态都去增删 class，逻辑会分散；而直接操作 style.listStyleType 只改一处，代码非常短。另一个场景是阅读模式：文章目录默认用数字编号，进入沉浸式阅读后改成 none，只保留缩进，视觉上更干净。

上手时还要明白，listStyleType 只负责标记符号本身，不控制标记位置、颜色或大小。标记位置由 list-style-position 决定，颜色继承自 <li> 的文本颜色，大小和字体相关。如果 <li> 本身被设置成 display: block 或浮动，标记可能会消失，这时即使 listStyleType 写对了也看不到效果。排查时可以先在浏览器开发者工具里检查 <li> 的计算样式。

下面这段代码根据任务完成状态切换标记：

function updateTaskStyle(taskItem, done) {
  if (done) {
    taskItem.style.listStyleType = 'none';
    taskItem.style.paddingLeft = '0';
  } else {
    taskItem.style.listStyleType = 'disc';
    taskItem.style.paddingLeft = '';
  }
}

这种写法的好处是即时生效、代码量小，适合原型验证或轻交互页面。但一旦列表项还要处理选中态、悬停态、动画，直接操作 style 会迅速变得零散。

三、长期使用感受：三个容易踩的坑

第一个坑是“读不到值”。很多人给 <li> 配好了 CSS class，然后用 style.listStyleType 去读取，结果得到空字符串。原因前面已经说明，内联样式和样式表是两条独立通道。需要获取最终生效值时，应该使用 getComputedStyle。例如：

const li = document.querySelector('li');
const computed = window.getComputedStyle(li);
console.log(computed.listStyleType); // 返回实际生效的值

第二个坑是简写覆盖。CSS 有 list-style 这个简写属性，它会同时设置 list-style-type、list-style-position 和 list-style-image。如果某处代码写了 element.style.listStyle = 'none';，它会把三个子属性全部重置。只想去掉标记符号时，应该用 listStyleType = 'none'，避免误伤位置和图片设置。

第三个坑是优先级。通过 JavaScript 写入的 style.listStyleType 属于内联样式，优先级高于普通 class 和样式表选择器，除非对方声明了 !important。这在临时状态切换时很方便，但如果页面有全局主题或用户自定义样式，内联样式可能造成覆盖混乱。长期维护时，建议把稳定的状态交给 CSS class，只有临时、动态、一次性的变化才直接操作 style.listStyleType。

四、与 CSS list-style-type 的差异及最佳实践

从渲染结果看，style.listStyleType 和 CSS 的 list-style-type 没有本质区别，差异主要在写法和应用时机。CSS 适合定义初始状态和主题风格，例如默认所有 <ul> 使用 square；JavaScript 适合处理用户交互带来的状态变化，例如点击按钮后把某个列表从 decimal 切换为 none。两者配合使用，代码层次更清晰。

最佳实践是：基础样式统一写在 CSS 里，交互切换使用 class 变更。例如在 CSS 中定义 .no-marker { list-style-type: none; }，然后用 classList.toggle('no-marker') 来切换。只有当列表项数量很少，且只需改一个属性时，才考虑直接操作 style.listStyleType。这样做的好处是，即使以后要换成自定义标记图片，或者调整标记位置，也不需要改动 JavaScript 逻辑。

还有一个实用细节：如果需要动态设置值，但值来自用户输入或后端数据，应该做白名单校验。比如只允许 disc、circle、square、decimal、none 等已知值，避免传入非法字符串导致样式静默失效。下面是一个简单示例：

const allowedTypes = ['disc', 'circle', 'square', 'decimal', 'none'];
function setListStyleType(element, type) {
  if (allowedTypes.indexOf(type) !== -1) {
    element.style.listStyleType = type;
  } else {
    console.warn('非法的列表标记类型：' + type);
  }
}

浏览器兼容性方面，listStyleType 作为 DOM Level 2 Style 的一部分，在 Chrome、Firefox、Safari、Edge 以及移动端浏览器中都支持良好，可以放心使用。唯一需要注意的是旧版 IE 对部分新增关键字支持不完整，但那些项目现在很少遇到。只要不依赖非常冷门的语言相关标记值，基本不会出现兼容问题。