Question

我正在制作纯粹的javascript webapp（无JQuery），它会在运行时生成所有内容。没有要加载的CSS文件，所有样式都由JS生成。

例如：

function newParagraph(content,x,y,w,h)
{
    var obj = document.createElement("div");
    obj.style.position = "absolute";
    obj.style.left = x + "px";
    obj.style.top = y + "px";
    obj.style.width = w + "px";
    obj.style.height = h + "px";
    obj.style.fontFamily = ..... some web font
    obj.style.fontSize = "20px";
    obj.style.fontWeight = "normal";
    obj.style.fontVariant = "small-caps";
    .... etc ....
    obj.innerHTML = content;
    return obj;
}

上面的函数将创建一个指定大小和绝对位置的div对象，将设置字体样式并将段落内容放在innerHTML中。

此内容可能包含对象。

我知道我可以在页面css中设置超链接样式。我不想要那个。我想仅在特定DIV对象的范围内设置超链接样式。因此，不同的DIV对象将以不同的样式显示超链接。

这可能，如果可能，怎么样？

Answer 1

你可以用不同的方式做到这一点，但默认情况下你不应该内联。

一种方法是使用JavaScript模拟它

<a
  href="/path/file.html"
  onMouseOver="this.style.color='#0F0'"
  onMouseOut="this.style.color='#00F'"
 >YourLink</a>

也可以使用Html。参见W3.org（http://www.w3.org/TR/2002/WD-css-style-attr-20020515）

的例2.3

 <a href="http://www.w3.org/"
      style="{color: #900}
      :link {background: #ff0}
      :visited {background: #fff}
      :hover {outline: thin red solid}
      :active {background: #00f}">...</a>

根据该信息，您可以使用JavaScript设置样式，或者在方法中使用JavaScript设置OnMouse函数。

Answer 2

从脚本中设置href，并为特定href设置样式，你可以使用css属性选择器，如

a[href^="http://stackoverflow.com"] { 
    color: red; 
    font-family: calibri;
    font-size: 24px;
    text-decoration: none;
}

确保只设置href =“http://stackoverflow.com”。

<强> Demo

Answer 3

好的我找到了解决方案，但如果有人有更好的想法，请发布答案，我会接受！

这是：

function newParagraph(content,x,y,w,h)
{
    var obj = document.createElement("div");
    obj.style.position = "absolute";
    obj.style.left = x + "px";
    obj.style.top = y + "px";
    .... etc ....
    obj.innerHTML = content;
    var childobj = obj.firstChild;
    while(childobj)
    {
        if( childobj.href !== undefined ) // this has hyperlink
            childobj.style.color = ..... hyperlink color ....
        childobj = childobj.nextSibling;
    }
    return obj;
}

是否可以仅在特定DIV中设置超链接样式

3 个答案: