Passing a php/mysql value to a div, accessible from javascript - php

Question

I am creating a <div> that represents a table row in sql, with php. Fine.
Then I am using a javascript function to test the values of the div (position, width etc).Fine.
But I need to pass another value to the div to be checked by the function. It is there in the database but I don't know if there is a (simple) way to do it. Ideally it would look something like this.
<div id='plumber5' class='plumber' style='width:50px;left:100px' value='numericValue'>Derek</div>
The inline styles are generated in php, and can't think of a way of passing a numeric value other than by style (width, height etc) that js can detect.
eg.
<script>
a=document.getElementById('plumber5');
if (a.style.width=>75){
execute something here}
</script>
Instead of using style as a source for testing
Its very troubling!
Thanks
EDIT - solution
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
}
}
}

Answer 1

You can use the data attribute of HTML5 to add some custom data to your HTML tags:
http://ejohn.org/blog/html-5-data-attributes/
Example:
<div data-value='10' id='plumber5' class='plumber' style='width: 50px; left: 100px;'>
Derek
</div>
You can get the value like this:
<script>
a = document.getElementById('plumber5');
if (a.getAttribute('data-value') => 75) {
// execute something here
}
</script>

Answer 2

You can use data- attributes this way:
<div id='plumber5' class='plumber' style='width: 50px; left: 100px'
data-value='numericValue'>Derek</div>
Note: HTML5 Data Attributes are supported only in modern browsers like IE 9+, Chrome 12+, Firefox 5+.
Notice that you have an error in the style attribute. Replace:
style='width=50px;left=100px'
With:
style='width: 50px; left: 100px'

Answer 3

If your audience doesn't support HTML5, you can embed a div like:
<div id="plumber5" class="plumber" style="width:50px;left:100px">
Derek
<div style="display: none">numericValue</div>
</div>
That would hide the value from view, but would allow you to access it view Javascript.

Answer 4

HTML5 supports data-* tag attributes, so you can use:
<div id='plumber5' class='plumber' data-value='numericValue' data-myothervalue='otherOne'>
Derek
</div>
EDIT
Since it looks messy in comments, here's how to access the example values:
var myDiv = document.getElementById('plumber5');
var myVal = myDiv.getAttribute('data-value'); // 'numericValue'
var myVal2 = myDiv.getAttribute('data-myothervalue'); // 'otherOne'