使用元素上的css屬性內容來爲javascript異常存儲信息

我使用variable.less配置文件來存儲有關設計的所有相關信息。其中一個信息是移動版面和PC版面之間的斷點。我也需要JavaScript中的這些信息，並且我不知道如何獲取它（不將它存儲在數據屬性中，因爲我希望將所有設計變量保留在同一個文件中）。使用元素上的css屬性內容來爲javascript異常存儲信息

所以，我終於發現：我在我的破發點存儲在variables.less：

@bk-point: "500px";

我使用的CSS屬性的「內容」，而不是一個僞元素，但在任何標籤（更少的文件）：

#any-div { 
    content: "@{bk-point}"; 
}

這樣，這並不影響設計（「內容」屬性不顯示元素，只在僞元素），我可以用jQuery讓它很容易：

var bkPoint = $('#any-div').css('content');

而我所有的變量都在較少的文件中。

這對我想要的是完美的，但是有沒有任何副作用，我沒有看到？由於我無法想象的原因，這是一個不好的做法嗎？

感謝您的建議！

Sébastien。

PS：
1.在Firefox 21.0和27.0鉻
2.當然，如果你有一個更好的解決方案...

來源

2013-09-01 Sébastien

我能想象的瀏覽器，其中'content' _does_顯示非僞元素......另一方面，我也可以想象瀏覽器完全忽略了非僞元素上的「content」;也就是說，不在任何地方存儲內容。 –

是的，我想沒有什麼能保證即使它現在可以工作，它仍然可以在幾年內工作... –

沒錯。但仍然是一個聰明的主意。 –

CSS的「內容」屬性只在僞有效元素： https://developer.mozilla.org/en-US/docs/Web/CSS/content

儘管這似乎是一個很酷的想法，但我覺得在生產中使用它並不舒服。我認爲你應該接受你的js變量和css變量將在2個不同的文件中，然後通過數據屬性應用這些值。

但是，如果你真的想要一個創造性的方式來做到這一點，只能從可以打印到HTML並因此與JavaScript交互的CSS文件做到這一點，那麼使用不會影響設計的有效屬性呢？

所有你真正做的是存儲在HTML字符串，那麼你可以使用一個默默無聞的元素，如計數器復位，然後通過jquery.css搶值（）

variables.less: @bkpoint = 500; 
css: 
#any-div { 
    counter-reset: break-point @bkpoint; 
} 
jquery: 
$('#any-div').css('counter-reset'); // returns: 'break-point 500'

簡單正則表達式函數讓你擺脫返回的字符串的「斷點」部分，並且你已經找到了你想要的東西。順便說一句，不能使用做任何其他的CSS屬性，比如：如果在計數器復位

border-width: @bkpoint; 
border: none;

規格你感興趣： http://www.w3.org/TR/CSS2/generate.html#propdef-counter-reset

來源

2013-09-01 15:51:26 DMTintner

使用計數器重置很聰明，但不知道跨瀏覽器的效果如何。在'：after'僞元素上使用content屬性（使用'display：none'）在我的測試中非常強大：http://stackoverflow.com/a/18457684/557612 – steveax

@steveax，這正是我試圖實現，但我不知道如何獲得：與js後的僞元素。你的鏈接很完美https://coderwall.com/p/_ldtkg –

@steveax真的很喜歡你的coderwall例子。非常不錯的除了響應式設計。只有關於調用js的僞元素的評論是，在複雜的佈局/架構中，您實際上也會應用一些數據屬性。並且（據我所知）這些只能應用於元素而不應用於僞元素，如果可以定位相同的元素，則會更容易。此外，計數器復位是CSS級別2，並具有非常高的瀏覽器支持，包括IE8。但是，就像我在答案中所說的那樣，只要不影響佈局，您可以在任何屬性上執行此操作。 – DMTintner

使用元素上的css屬性內容來爲javascript異常存儲信息

回答

相關問題