首页 文章

我可以将CSS样式应用于元素名称吗？

提问于
浏览 次
141

我目前正在开发一个项目，我无法控制我应用CSS样式的HTML . 并且HTML没有很好地标记，因为没有足够的id和类声明来区分元素 .

所以，我正在寻找可以将样式应用于没有id或class属性的对象的方法 .

有时，表单项具有“名称”或“值”属性：

<input type="submit" value="Go" name="goButton">

有没有办法可以应用基于name =“goButton”的样式？那么“ Value ”呢？

这是很难找到的东西，因为谷歌搜索会发现各种各样的实例，其中“名称”和“ Value ”等广义术语将出现在网页中 .

我有点怀疑答案是否定的......但也许某人有一个聪明的黑客？

任何建议将不胜感激 .

html css css-selectors

7 回答

  • 218

    您可以使用属性选择器 input[name="goButton"] { } . 请注意，IE6不支持它 .

    更新：在2016年你几乎可以随意使用它们，因为IE6已经死了 . http://quirksmode.org/css/selectors/

    http://reference.sitepoint.com/css/attributeselector

    回复于
  • 17

    文本输入示例

    input[type=text] {    
    width: 150px; 
}

input[name=myname] {    
    width: 100px;
}
    回复于
  • 3

    你可以使用属性选择器，但它们不能在IE6中工作，就像meder说的那样，有一些javascript解决方法 . 检查Selectivizr

    更详细的属性选择器：http://www.css3.info/preview/attribute-selectors/

    /* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
    回复于
  • -2

    对于未来的googlers，FYI，@ meder的答案中的方法，可以与任何具有name属性的元素一起使用，所以让我们说 <iframe> 的名称为 xyz 然后你可以使用下面的规则 .

    iframe[name=xyz] {    
    display: none;
}

    name 属性可用于以下元素：

    • <button>

    • <fieldset>

    • <form>

    • <iframe>

    • <input>

    • <keygen>

    • <map>

    • <meta>

    • <object>

    • <output>

    • <param>

    • <select>

    • <textarea>

    回复于
  • 8

    如果我理解你的问题，那么，

    是的，你可以设置单个元素的样式，如果它的ID或名称可用，

    例如

    if id available then u can get control over the element like,

    <input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

    else if name is available then u can get control over the element like,

    <input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');
    回复于
  • 0

    这是查询选择器的完美工作......

    var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

    然后，您可以遍历这些集合以对找到的元素进行操作 .

    回复于
  • 48

    你有没有探索过使用jQuery的可能性？它有一个非常广泛的选择器模型（类似于CSS的语法），即使你的元素没有ID，你也应该能够使用parent - > child - > grandchild relationship选择它们 . 选择它们之后，会有一个非常简单的方法调用（我忘记了确切的名称），它允许您将CSS样式应用于元素 .

    它应该很简单，作为奖励，你很可能是跨平台兼容的 .

    回复于

相关问题