1. 首页
  2. 问答
  3. 有没有像HTML中的自定义布尔属性？

有没有像HTML中的自定义布尔属性？

2016-06-23 99 views
2

在HTML5中，我们可以使用自定义data-* attributes。然而，据我所知，并考虑到他们是属性我期望他们需要一个字符串值。在HTML中是否有替代方案允许定制属性，即布尔值属性，如checked,required,hidden等。有没有像HTML中的自定义布尔属性？

比方说，我有一个学校的网站。我们还要说，如果用户是老师，我希望页面上的某些元素与用户交互，但不是他们是学生时。在JavaScript中，将事件附加到某些具有属性teacher-can-interact或类似属性的元素将会很好。我明显知道我可以使用类或数据属性，但类看起来在语义上并不漂亮，并且在我看来，具有yes值的数据属性是荒谬的 - 这就是属性的用处。

那么，有什么办法，或有任何计划，以支持自定义属性？ （不属性）

编辑：属性我指的是从版本1.6（.1）开始在jQuery中做出的区分，其中属性主要是布尔属性。我期望（想）下面的代码返回true，但它返回一个空字符串。

console.log($("div").prop("data-intrusive")); 
 
console.log($("div").attr("data-intrusive"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-intrusive></div>

显然，有变通办法等确认typeof之类的东西。但是，如果有创建自定义布尔属性的方法会很好，该方法在JavaScript中而不是字符串中返回true或false。

来源

2016-06-23 Bram Vanroy

回答

1

对于DOM属性，如检查，选择禁用或隐藏，你会得到布尔值

$("div").attr("data-intrusive");

。 attr（）将获得属性的值，而不是布尔值。 .attr（）将尝试获取数据侵入式的值，如果你观察到的数据侵入的DOM是空字符串

<div data-intrusive="">1</div>

的价值。托（）将返回布尔属性和属性值布尔值，所有其他属性

例如，考虑下面的例子

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div data-intrusive style="color:red" hidden>1</div>

JS：

console.log($("div")[0].outerHTML) //output- <div data-intrusive="" style="color:red" hidden="">1</div> 

console.log($("div").prop('style'));// output-CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…} 
console.log($("div").attr('style'));//output- color:red 


console.log($("div").prop('hidden'));//true 
console.log($("div").attr('hidden'));//hidden 

console.log($("div").attr('data-intrusive'));//empty string as expected 
console.log($("div").prop('data-intrusive'));//undefined as expected, as there is no property value

要获得预期的结果，使用字符串值的hasAttribute（'data-intrusive'）或设置数据入侵属性为布尔值来获取.prop（'data-intrusive'）v ALUE布尔

//if it is a string value 
console.log($("div")[0].hasAttribute('data-intrusive')); 

//if it is boolean ,then it is return the same 
$("div").prop('data-intrusive','fasle'); 
console.log($("div").prop('data-intrusive'));

Codepen - http://codepen.io/nagasai/pen/VjgNwx

来源

2016-08-15 18:07:00

0

在实践中，你可以使用属性你想要的任何自定义，也将努力：

console.log(document.querySelector('div').getAttribute('foo'));
<div foo="bar">My div</div>

从技术上讲，这不是有效的HTML标记。没有计划支持自定义属性，这就是数据属性。您可以设置属性和数据属性是在代码true：

element.setAttribtue('teacher-can-interact', true); 
element.dataset['teacher-can-interact'] = true;

但他们总是会从HTML解释为字符串 - 这是现在的样子HTML的作品，这是不是一种编程语言，并没有概念的数据类型。

来源

2016-06-23 19:34:01 skyline3000

+0

我不完全知道为什么你正在把数据属性到这个时候我说清楚，我知道他们，但是这不是我要找的。我正在谈论自定义*属性*。看看[这个小提琴]（https://jsfiddle.net/5ybwg4xz/）。正如你可以看到'hidden'返回true。我想要一个定制属性也返回true，而不需要诉诸语义上可疑的'x = yes'。 –

+0

当你寻求帮助而有人试图提供某些东西时，不需要有一种态度，并告诉你，你想要的东西是有意被存在的东西处理的。特殊的全局属性在不同的浏览器中会有不同的行为 - 有些可能给你一个布尔值，一些字符串，并且没有预测哪个会做什么。 W3没有定义如何处理他们应该像处理其他属性一样处理，比如'id'：https：//www.w3.org/TR/html-markup/syntax.html#syntax-attr-empty 正如我在我的回答中所述，没有计划支持自定义属性。 – skyline3000

+1

我认为你误解了我的评论。我真的很问你为什么提出数据属性，因为它让我感到困惑，因为我在OP中说过我知道他们。也许我应该改变我的问题：有没有一种方法来使用自定义*布尔属性*没有定义一个值作为字符串*真*。所以，我期望[this]（https://jsfiddle.net/yymxhcqq/）返回true，而它返回一个空字符串。 –

相关问题

 相关问题