0

我见过的所有示例都使用“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 函数，它将根据滑块按比例调整上面的元素的大小。我正在使用的滑块可从此处的第 3 方获得：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”值？我可以使用 switch 语句为每个匹配元素换出 CSS 样式，但这可能不像其他选项那样平滑。

更新2

此外，如果有人想查看我的代码，这里有一个自包含示例： http ://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

如果您下载 ComponentArt 控件，请随时取消注释滚动条代码。

我的目标是直接模拟 Outlook 2007 中可用的缩放功能

替代文字

4

3 回答 3

3

如果你谷歌 getelementbyclassname 这可能对你有帮助。与 getelementbyid 类似的想法，但通过类名获取它们，您可以根据需要修改它们的样式。

于 2010-08-12T15:50:51.127 回答
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>

您需要其中一些元素可以缩放/重新调整大小。首先，您需要使用元素标识符来识别这些元素；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 的建议将该元素分配给多个类：

该属性将一个类名或一组类名分配给一个元素。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。

所以我们已经弄清楚了标记。现在为 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 不支持它，因此您必须使用对象检测来确定是否需要定义它：

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";
            }
        }
    }
}

这并不能完全解决您的问题，但它应该让您走上正确的道路。

于 2010-08-12T18:32:12.407 回答
0

我的建议是在 CSS 文件中创建您需要的类并使用 jQuery 更改它。

.class1{background-color:#ff0000;}
.class2{background-color:#0000ff;}

在 jQuery 中：

$("#element").click(function(){
    $(".class1").removeClass("class1").addClass("class2");
});

这样，您不需要做任何“奇怪”和复杂的事情来获得您需要的结果。

于 2010-08-12T15:55:32.470 回答