Question

有没有办法使用JavaScript列出CSS游标属性的所有可能值？

我正在寻找符合

的内容

var possibleValues = document.getAllPossibleCusorValues();

我已完成some testing，但这是基于CSS2和CSS3-Draft

的一组可能的游标

Answer 1

检查this（将光标悬停在要测试的列表上）

developer.mozilla.org这是一个比w3schools

更可靠的来源

Answer 2

您可以在Mozilla

查看cursor属性的文档

Formal syntax: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

我假设你想用Javascript列出它们。我不确定这是可能的。

Answer 3

从MDN source，您可以拥有以下光标值：

auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing

Answer 4

关于cursor属性值的当前权威参考是CSS 2.1，如问题中所述。正在进行的工作是定义 CSS基本用户界面模块级别3（CSS3 UI），目前为Working Draft（有一个较新的编辑草案，但它似乎没有包含添加内容一组值），添加了一些关键字。

这只是当前在规范和草案中定义的值。浏览器实际上可能支持一些不同的值。根据评论，可能没有直接的方法可以在JavaScript中找到这个问题，这就是问题所在。

然而，您可以通过将每个值分配给属性并检查它是否真的得到该值来检查规范和草案（或者更一般地，在某些特定列表中）中的哪些值被浏览器支持价值或保持不变。以下代码执行此操作。它不处理URL值（不是关键字）。

<script>
var values = [
'auto', 'default', 'none',
'context-menu', 'help', 'pointer', 'progress', 'wait',
'cell', 'crosshair', 'text', 'vertical-text',
'alias', 'copy', 'move', 'no-drop', 'not-allowed',
'e-resize', 'n-resize', 'ne-resize', 'nw-resize',
's-resize', 'se-resize', 'sw-resize', 'w-resize',
'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize',
'col-resize', 'row-resize', 'all-scroll', 'zoom-in', 'zoom-out'
];
var supported = [];
var e = document.createElement('div');
for(var i = 0; i < values.length; i++) {
  e.style.cursor = values[i];
  if(e.style.cursor === values[i]) {
    supported.push(values[i]); }
}
document.write(supported);
</script>

（使用最新版本的热门浏览器进行测试表明，Firefox支持整个列表，Chrome和IE仅支持zoom-in和zoom-out。

使用JavaScript列出当前浏览器支持的CSS游标值

4 个答案: