<!DOCTYPE html>
<html>
<head>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<title>Borderize - RJM Programming - May, 2015</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var was;
var lastbody=false;
$(document).ready(function(){
was=document.body.innerHTML;
});
function analyse(ois, oisval) {
if (oisval != '') {
document.body.innerHTML=was;
if (oisval.indexOf("body") != -1) {
eval('$("' + oisval + '").css({"color": "red", "border": "2px solid red"})');
lastbody=true;
} else {
if (lastbody) {
eval('$("body").css({"color": "black", "border": "2px solid black"})');
document.body.style.border=null;
lastbody=false;
}
eval('$("body").find("' + oisval + '").css({"color": "red", "border": "2px solid red"})');
}
}
}
</script>
</head>
<body id='ibody' class='cbody' align='center' style='background-color: #f0f0f0;'>
<h1 id='ih1' class='ch1' align='center'>Put a Border Around HTML Element Type or .Class or #ID</h1>
<h4 id='ih4' class='ch4' align='center'>RJM Programming - May, 2015</h4>
<div align='center' id='idiv1' class='cdiv'>
I am a div tag #idiv1 .cdiv
<select id='iselect1' class='cselect' onchange='analyse(this,this.value);'><option value=''>Please choose from a select tag #iselect1 .cselect ...</option><option value='p'>p</option><option value='span'>span</option><option value='div'>div</option><option value='select'>select</option><option value='img'>img</option><option value='h1'>h1</option><option value='h4'>h4</option><option value='body'>body</option><option value='.cp'>.cp</option><option value='.cspan'>.cspan</option><option value='.cdiv'>.cdiv</option><option value='.cselect'>.cselect</option><option value='.cimg'>.cimg</option><option value='.ch1'>.ch1</option><option value='.ch4'>.ch4</option><option value='.cbody'>.cbody</option><option value='#ih1'>#ih1</option><option value='#ih4'>#ih4</option><option value='#ibody'>#ibody</option><option value='#ip1'>#ip1</option><option value='#ispan1'>#ispan1</option><option value='#idiv1'>#idiv1</option><option value='#iselect1'>#iselect1</option><option value='#iimg1'>#iimg1</option><option value='#ip2'>#ip2</option><option value='#ispan2'>#ispan2</option><option value='#idiv2'>#idiv2</option><option value='#iselect2'>#iselect2</option><option value='#iimg2'>#iimg2</option><option value='#ispan3'>#ispan3</option></select>
<p id='ip1' class='cp'>
I am a p tag #ip1 .cp
</p>
<img id='iimg1' class='cimg' src='http://www.rjmprogramming.com.au/PHP/one.jpg' style="height:75px;width:100px;">I am an img tag #iimg1 .cimg</img><br>
<span id='ispan1' class='cspan'>
I am a span tag #ispan1 .cspan
</span><br><br>
<span id='ispan2' class='cspan' align='center'>------------- #ispan2 .cspan ------------------------------</span><br><br>
</div>
<div align='center' id='idiv2' class='cdiv'>
I am a (second) div tag #idiv2 .cdiv
<select id='iselect2' class='cselect' onchange='analyse(this,this.value);'><option value=''>Please choose from a (second) select tag #iselect2 .cselect ...</option><option value='p'>p</option><option value='span'>span</option><option value='div'>div</option><option value='select'>select</option><option value='img'>img</option><option value='h1'>h1</option><option value='h4'>h4</option><option value='body'>body</option><option value='.cp'>.cp</option><option value='.cspan'>.cspan</option><option value='.cdiv'>.cdiv</option><option value='.cselect'>.cselect</option><option value='.cimg'>.cimg</option><option value='.ch1'>.ch1</option><option value='.ch4'>.ch4</option><option value='.cbody'>.cbody</option><option value='#ih1'>#ih1</option><option value='#ih4'>#ih4</option><option value='#ibody'>#ibody</option><option value='#ip1'>#ip1</option><option value='#ispan1'>#ispan1</option><option value='#idiv1'>#idiv1</option><option value='#iselect1'>#iselect1</option><option value='#iimg1'>#iimg1</option><option value='#ip2'>#ip2</option><option value='#ispan2'>#ispan2</option><option value='#idiv2'>#idiv2</option><option value='#iselect2'>#iselect2</option><option value='#iimg2'>#iimg2</option><option value='#ispan3'>#ispan3</option></select>
<p id='ip2' class='cp'>
I am a (second) p tag #ip2 .cp
</p>
<img id='iimg2' class='cimg' src='http://www.rjmprogramming.com.au/PHP/two.jpg' style="height:75px;width:100px;">I am a (second) img tag #iimg2 .cimg</img><br>
<span id='ispan3' class='cspan'>
I am a (second) span tag #ispan3 .cspan
</span><br><br>
</div>
</body>
</html>