-2

我有这个样式表

#navigation {
  float: left;
  white-space: nowrap;
  font-size: 12px;
  font-weight:bold;
}

#navigation ul {
  list-style-type: none;
  padding-top: 30px;
}

#navigation ul li {
  float: left;
  display: inline;
  border-right: solid 1px #5f5f5f;
  padding-right: 8px;
  margin-right:8px;
}

这是 HTML

      <div id="navigation" >
            <ul dir="rtl">
                <li>
                    <asp:LinkButton ID="LinkButtonRegister" runat="server" Visible="true" CausesValidation="False"
                        PostBackUrl="~/Register.aspx">הרשמה</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonLogin" runat="server" Visible="true" CausesValidation="False">התחבר</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonLogout" runat="server" Visible="false" OnClick="ButtonLogOut_Click"
                        CausesValidation="False">התנתק</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonMyAccount" runat="server" Visible="false" CausesValidation="False"
                        PostBackUrl="~/MyAccount.aspx">אזור אישי</asp:LinkButton>
                </li>
              </ul>
            </div>

如何将“#navigation ul li”“float”属性更改为“right”？

我可以使用 javascript-documnet.getelementbyid("navigation") 访问 div 导航，但不知道如何进入样式表中定义的每个 li 的样式

4

6 回答 6

2

You should be doing this in the stylesheet, but if you don't have access to that, you can use JavaScript similar to the following:

// get all of the DOM nodes which match the selector
var nodes = document.querySelectorAll("#navigation ul li");
// loop through all of the nodes
for (var i = 0; i < nodes.length; i++) {
  // set the style
  nodes[i].style.float = "right";
}

NOTE: document.querySelectorAll will only work on modern browsers (Chrome, Safari, FF, IE9+).

于 2013-06-04T09:58:40.037 回答
2

你想要这样的输出检查示例

JavaScript

document.getElementById("navigation").style.cssFloat = "right";

身体标签内

  <div id="navigation" >
        <ul dir="rtl">
            <li>
                <asp:LinkButton ID="LinkButtonRegister" runat="server" Visible="true" CausesValidation="False"
                    PostBackUrl="~/Register.aspx">הרשמה</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonLogin" runat="server" Visible="true" CausesValidation="False">התחבר</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonLogout" runat="server" Visible="false" OnClick="ButtonLogOut_Click"
                    CausesValidation="False">התנתק</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonMyAccount" runat="server" Visible="false" CausesValidation="False"
                    PostBackUrl="~/MyAccount.aspx">אזור אישי</asp:LinkButton>
            </li>
          </ul>
        </div>

CSS代码

#navigation {
  float: left;
  white-space: nowrap;
  font-size: 12px;
  font-weight:bold;
}

#navigation ul {
  list-style-type: none;
  padding-top: 30px;
}

#navigation ul li {
  float: left;
  display: inline;
  border-right: solid 1px #5f5f5f;
  padding-right: 8px;
  margin-right:8px;
}
于 2013-06-04T10:04:36.457 回答
1

In vanilla JS you first need to get the navigation element using getElementById, then get all its list items using getElementsByTagName. Then, iterating through the list items you can set element.style.float:

var nav = document.getElementById("navigation"),
    lis = nav.getElementsByTagName("li"),
    l = lis.length,
    i = 0;
for (i; i < l; i++) { 
    lis[i].style.float = "right";
}
于 2013-06-04T10:00:11.290 回答
1

绝对可以添加动态样式表：

var sheet = document.createElement('style')
sheet.innerHTML = "#navigation ul li {float: right;}";
document.body.appendChild(sheet);
于 2013-06-04T09:57:31.213 回答
0

使用这个功能：

function style(selector, cssStyle, final) {           // make a style function with paramaters: selecctor (the selector you want to style e.g '.test'), cssStyle (the style you would like to change e.g. 'fontFamily'), and final (e.g 'Arial, Helvetica, sans-serif')
  const elems = document.querySelectorAll(selector);  // actually get the elements
  for (const elem of elems) {                         // loop through all the elements
    elem.style[cssStyle] = final;                     // change the element's style of cssStyle to final using square brackets (e.g.({ test: true })['test'] outputs true)
  }
}
/**
  * Example:
  * Style all h1s' font family to Arial, Helvetica, sans-serif:
  */
    style(
      'h1',
      'fontFamily',
      'Arial, Helvetica, sans-serif'
    );
/**
  * Style all ps' background image to linear-gradient(to bottom right, red, yellow):
  */
    style(
      'p',
      'backgroundImage',
      'linear-gradient(to bottom right, red, yellow)'
    );
/**
  * You get it, its pretty cool
  * For your situation:
 */
    style(
      '#navigation ul li',
      'float',
      'right'
    )

于 2020-03-21T15:06:35.800 回答
-1

If you want to change that dinamycally (you have "javascript" tag in the question) put this in your javascript (on the desired event)

$("#navigation ul li").css("float", "right");

I assume you have Jquery included!

于 2013-06-04T09:58:48.393 回答