Question

我正在尝试设置一些超链接，为网页上的各种元素设置内联样式。到目前为止，我已经能够将元素和属性设置存储在隐藏的span元素中，并将它们传递给警报对话框。但是，当我尝试使用css函数设置这些样式时，它无法正常工作或抛出任何错误。

HTML：

<a class="styleswitch">Boxed
<span class="elementselector" style="display:none">#page</span>
<span class="styleattributes" style="display:none">"width": "1000px"</span>
</a>
<a class="styleswitch">Wide
<span class="elementselector" style="display:none">#page</span>
<span class="styleattributes" style="display:none">"width": "100%"</span>
</a>

jQuery的：

jQuery(document).ready(function(){
    jQuery('a.styleswitch').click(function(){
    var element_selector = jQuery(this).find("span.elementselector").contents().text(),
        style_attributes = jQuery(this).find("span.styleattributes").contents().text();

    // alert('Set ' + element_selector + ' to ' + style_attributes + '');

    jQuery(element_selector).css( style_attributes );

    return false;
});

Answer 1

您正在将字符串传递给.css()方法，这意味着您将其用作getter而不是setter。

我建议使用HTML5 data-*属性，此处data-styles是对象的字符串表示形式，通过使用jQuery .data()方法，您将拥有一个对象：

<a data-styles='{ "width": "1000px", "prop": "value" }' 
   data-selector="#page"
   class="styleswitch">
      Boxed
</a>

JavaScript的：

$('a.styleswitch').on('click', function() {
   var data = $(this).data();
   $(data.selector).css(data.styles); 
});

http://jsfiddle.net/7t4Jb/

Answer 2

有了这个：

jQuery(element_selector).css( JSON.parse("{" + style_attributes + "}"));

是的，它有效。

另一种选择：

 var styleParts = style_attributes.split(":");
 jQuery(element_selector).css( styleParts[0].replace(/"/g, ''), styleParts[1]);

替换只是从样式名称中删除双引号。

但是，在将来你可能想要添加更多样式规则（而不仅仅是宽度），所以我建议你将样式规则添加到样式规则（成为JSON），所以你需要：< / p>

<span class="styleattributes" style="display:none">
  {"width": "100%", "backgroundColor": "red"}
</span>

如果你做了这个改变，你会读到这样的风格：

 jQuery(element_selector).css( eval(style_attributes) );

（我在这里使用eval代替JSON.parse，因为我假设您将手动编辑这些CSS，而eval并不像JSON.parse那样严格。

希望这会有所帮助。干杯

Answer 3

在隐藏的<span>属性中存储类似的东西是有问题的，因为浏览器仍然关注内容。更好（更好，更安全;有些人因为我并不理解的原因而不喜欢它）隐藏这类内容的方法是使用带有非JavaScript“type”属性的<script>标签：

<a class="styleswitch">Boxed
  <script type=text/my-selector class="elementselector">#page</script>
  <script type=text/css-styles class="styleattributes">{ "width": "1000px" }</script>
</a>

浏览器将完全忽略该内容（除了任何嵌入式结束</script>标记）。你仍然可以从jQuery中获取内容：

jQuery(document).ready(function(){
    jQuery('a.styleswitch').click(function(){
      var element_selector = jQuery(this).find(".elementselector").html(),
        style_attributes = jQuery(this).find(".styleattributes").html());

    // alert('Set ' + element_selector + ' to ' + style_attributes + '');

    jQuery(element_selector).css( JSON.parse(style_attributes) );

    return false;
});

请注意，我将样式属性块修改为JSON结构，以便可以在“click”处理程序中将其解析并转换为JavaScript对象。

编辑我不知道downvoters是谁，但这是一种非常常见的做法，比如存储HTML模板和JSON块。值得担心的所有浏览器（包括移动浏览器）都完全忽略了具有非JavaScript“type”属性的<script>块的内容。这意味着内容可以包含HTML片段而不会造成任何问题。

Answer 4

更改jQuery(element_selector).css( style_attributes );

到==＆gt; jQuery(element_selector).css( {style_attributes} );

它应该有用。

在jquery中有两种方法可以实现css：

.css("width","px")

或

.css({"width":"px"})

你做错了是尝试用第二种方式实现css但没有{}。

希望我能帮到你。

将变量传递给jquery .css（）函数

4 个答案: