I'm wondering how to change the CSS using Javascript without "refreshing" the page. The page doesn't actually refresh; however, the scroll bar moves back to the top of the page. I can change the CSS using Javascript from the following which was taken from
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_22005907.htm.
Is there a way to code so the scroll bar doesn't take the visitor back to the top of the page?
<html>
<head>
<title>Change Font Size</title>
<script type=text/javascript>
function ChangeFontSize(amt) {
var minSize = 8;
var maxSize = 24;
var currentSize = getClassProperty("KYBD_But
ton","font
Size");
currentSize = currentSize.replace("pt","
");
var newSize = parseInt(currentSize) + amt;
if (newSize >= minSize && newSize <= maxSize) {
changeClassProperty("KYBD_
Button","f
ontSize",n
ewSize + "pt");
}
}
// get the value of a property of a CSS Rule
function getClassProperty(sClassNam
e,sPropert
y) {
sClassName="."+sClassName;
var sheets = document.styleSheets;
var rules;
var styleObj;
for (i=0;i< sheets.length; i++) {
rules=sheets[i].cssRules || sheets[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText==sCl
assName) {
styleObj=rules[j].style;
return styleObj[sProperty];
}
}
}
}
// set the value of a property of a CSS Rule
function changeClassProperty(sClass
Name,sProp
erty,sValu
e) {
sClassName="."+sClassName;
var sheets = document.styleSheets;
var rules;
var styleObj;
for (i=0;i< sheets.length; i++) {
rules=sheets[i].cssRules || sheets[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText==sCl
assName) {
styleObj=rules[j].style;
styleObj[sProperty]=sValue
;
break;
}
}
}
}
</script>
<style type=text/css>
.KYBD_Button {font-size:12pt;}
.a{
width: 100px;
height: 50px;
border: 1px dotted #ccc;
margin: 2px;
background-color: #fff;
}
.b{
width: 100px;
height: 50px;
border: 1px dotted #ccc;
margin: 2px;
background-color: #fff;
}
</style>
</head>
<body>
<input type=button value="Font -" onclick="ChangeFontSize(-1
);" />
<input type=button value="Font +" onclick="ChangeFontSize(+1
);" /><br />
<span class="KYBD_Button">This font should change size when the buttons are clicked</span><br />
This font should remain static.<br><br>
<br />
<div id="main">
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
</div>
<br />
<a href="#" onClick="changeClassProper
ty('a','wi
dth', '120px');">Widen All Divs with Class 'a'</a><br />
<a href="#" onClick="changeClassProper
ty('b','ba
ckground',
'#ccc');">Color All Divs with Class 'b'</a>
</body>
</html>
Start Free Trial
