我见过的所有示例都使用“getElementById”来获取单个元素,然后为该单个元素更改该样式。
我正处于需要使用样式修改页面上所有匹配元素的情况。我需要更改字体大小,高度和宽度。我该怎么做,是jQuery需要还是可选的?我问的原因是因为这个站点不使用jQuery而我宁愿不下载整个库只是为了完成这件事。
更新 举个例子,假设我在页面上有几个具有这种风格的元素:
.outerContact
{
border: 0px;
margin: 7px;
float: left;
padding: 0px;
background: url(/TLSADMIN/UserControls/contactsgrid/trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}
.contactLarge{
height: 163px;
width: 250px;
border: 1px solid #ccc;
border-top: 1px solid #ddd;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:small;
margin: -5px 5px 5px -5px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
/* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
background-image: url('/TLSADMIN/UserControls/contactsgrid/OutlookContactGradient.png') ;
background-repeat:repeat-x;
background-position: bottom;
padding: 0px; /* Increasing this gives a white border around the image */
background-color: #f2f6f9; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
}
然后假设我有一个JavaScript函数,它将根据滑块按比例调整上面的元素。我正在使用的滑块可从第三方获得: http://aspnetajax.componentart.com/control-specific/slider/features/custom_Scrollbar/WebForm1.aspx
然后该滑块将传递一个数字,我将用它来确定放大/缩小的数量:
function ResizeWindowAccordingToScrollBar(PercentChange)
{
//Locate elements
//Resize fonts, borders, all styles to zoom in/ zoom out.
}
您如何推荐我处理“PercentChange”值?我可以使用开关语句为每个匹配元素换出CSS样式,但这可能不像其他选项那样平滑。
UPDATE2
此外,如果有人想查看我的代码,那么自包含的示例就在这里: http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip
如果您下载了ComponentArt控件,请随时取消注释滚动条代码。
我的目标是直接模拟Outlook 2007中可用的缩放功能
答案 0 :(得分:3)
如果您使用google getelementbyclassname可能对您有帮助。与getelementbyid类似的想法,但通过classname获取它们,你可以根据需要修改它们的样式。
答案 1 :(得分:2)
所以,假设你有一些像这样的HTML ......
<div>
<h2>Example</h2>
<p>This is an example</p>
<p>
Some of this content can be re-sized.
</p>
<img src="lenna.jpg" class="iconic" alt="a petty lady" />
</div>
您需要其中一些元素可以缩放/重新调整大小。首先,您需要使用element identifiers来识别这些元素; id
属性或class
属性。
两者之间的区别是id
属性必须是唯一的;由于我们需要将多个项目标识为可缩放,因此我们将使用class
属性。我们将使用适当的,不言而喻的值,例如zoomable
。
<div>
<h2>Example</h2>
<p>This is an example</p>
<div>
<h2>Example</h2>
<p>This is an example</p>
<p class="zoomable">
Some of this content can be re-sized.
</p>
<img src="lenna.jpg" class="zoomable iconic" alt="a petty lady" />
</div>
</div>
请注意,<img>
元素已经有class
属性,但我们可以根据w3c recommendation将该元素分配给多个类:
此属性为元素指定类名或类名集。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。
所以我们已经找到了标记。现在是JavaScript。
完成上述操作后,您可以使用document.getElementsByClassName(...)
函数获取对所有zoomable
元素的引用:
var zoomables = document.getElementByClassName('zoomable');
for(var i=0; i<zoomables.length; i++) {
zoomables[i].style.height = '100px';
zoomables[i].style.width = '100px';
zoomables[i].style.fontSize = '20px';
}
...但在Internet Explorer中不支持,因此您必须使用Object Detection来确定是否需要定义它:
if(!document.getElementsByClassName) {
document.getElementsByClassName = function(className) { // this is the simplest, plainest, lowest-invested-time-and-effort
// version of getElementsByClassName one can write...
// you should probably sanitize that className input parameter a bit...
var allElements = document.getElementsByTagName('*');
for(var i=0; i<allElements.length; i++) {
if(/\bclassName\b/.test(allElements[i].className)) {
allElements[i].style.border = "2px solid red";
}
}
}
}
这并不能完全解决您的问题,但它应该让您走上正确的道路。
答案 2 :(得分:0)
我的建议是在CSS文件中创建所需的类,并使用jQuery更改它。
.class1{background-color:#ff0000;}
.class2{background-color:#0000ff;}
在jQuery中:
$("#element").click(function(){
$(".class1").removeClass("class1").addClass("class2");
});
这样,你不需要做任何“怪异”和复杂的事情来获得你需要的结果。