將php/mysql值傳遞給div，可從javascript訪問

我正在用php創建表示sql表格行的<div>。精細。然後，我使用javascript函數來測試div的值（位置，寬度等）.Fine。但我需要傳遞另一個值的div來檢查功能。它存在於數據庫中，但我不知道是否有一種（簡單的）方式來完成它。理想情況下，它看起來像這樣。將php/mysql值傳遞給div，可從javascript訪問

<div id='plumber5' class='plumber' style='width:50px;left:100px' value='numericValue'>Derek</div>

樣式在PHP生成，並且不能認爲傳遞其他的數值大於由式（寬度，高度等）的方式中的內聯該js的可檢測。

例如。

<script> 
a=document.getElementById('plumber5'); 
if (a.style.width=>75){ 
execute something here} 
</script>

而不是使用樣式作爲源用於測試

它很麻煩的！感謝

編輯 - 解決方案

function checkData($type){ 
    a = document.getElementsByClassName($type); 
    for(i = 0; i < a.length; i++) 
    { 
    if (a[i].getAttribute('data-dob') >= sessionStorage.Value) { 
    // execute something here 
    } 
    } 

}

來源

2013-01-24 gavin

沒有使用AJAX如果poss – gavin

這裏有一個錯誤btw：'style ='width ='50px; left = 100px''（一個額外的單引號） – crush

可以使用HTML5的數據屬性一些自定義的數據添加到您的HTML標籤：

http://ejohn.org/blog/html-5-data-attributes/

例子：

<div data-value='10' id='plumber5' class='plumber' style='width: 50px; left: 100px;'> 
    Derek 
</div>

你可以得到的價值是這樣的：

<script> 
    a = document.getElementById('plumber5'); 
    if (a.getAttribute('data-value') => 75) { 
     // execute something here 
    } 
</script>

來源

2013-01-24 13:11:33 tbraun89

嗨，這是偉大的，但可以使用Javascript測試值類似於上面的例子？ – gavin

添加了一個示例如何執行此操作。 – tbraun89

我使用getElementsByClassName來測試每個元素的類名稱，但它似乎並沒有工作 - 我得到錯誤未捕獲TypeError：對象＃沒有方法'getAttribute'，代碼粘貼 – gavin

您可以使用data-屬性是這樣的：

<div id='plumber5' class='plumber' style='width: 50px; left: 100px' 
    data-value='numericValue'>Derek</div>

注： HTML5數據屬性只支持現代瀏覽器，如IE 9 Chrome 12 +，Firefox 5+。

請注意，您在style屬性中有錯誤。替換：

style='width=50px;left=100px'

有了：

style='width: 50px; left: 100px'

來源

2013-01-24 13:11:31

提及數據屬性的瀏覽器兼容性。 – crush

@crush謝謝...完成.... –

HTML5支持data-*標籤屬性，所以你可以使用：

<div id='plumber5' class='plumber' data-value='numericValue' data-myothervalue='otherOne'> 
    Derek 
</div>

編輯

，因爲它看起來在評論凌亂，這裏是如何訪問示例值：

var myDiv = document.getElementById('plumber5'); 
var myVal = myDiv.getAttribute('data-value');   // 'numericValue' 
var myVal2 = myDiv.getAttribute('data-myothervalue'); // 'otherOne'

來源

2013-01-24 13:11:50 Shomz

謝謝，Shomz。這是一個啓示！我正在使用html5。可以通過javascript測試嗎？ – gavin

絕對！var div = document.getElementById（'plumber5'） ; var myVal = div.getAttribute（'data-value'）; var myVal2 = div.getAttribute（'data-myothervalue'）;' – Shomz

如果您的受衆羣體sn't支持HTML5，你可以嵌入像一個div：

<div id="plumber5" class="plumber" style="width:50px;left:100px"> 
    Derek 
    <div style="display: none">numericValue</div> 
</div>

這會從視圖中隱藏的價值，但將允許您訪問查看的JavaScript。

來源

2013-01-24 13:14:02 crush

將php/mysql值傳遞給div，可從javascript訪問

回答

相關問題