Setting border radius for the first child of li dynamically using Javascript

Question

Setting border radius for the first child of li dynamically using Javascript

I am currently working on creating a navigation bar that features rounded corners for the first and last children within an unordered list. My goal is to utilize the onclick javascript function to dynamically assign these rounded corners directly in JavaScript. Below is the snippet of code I have attempted to use. If anyone could provide insight into what may be causing issues or suggest a solution or resource, it would be greatly appreciated. Thank you in advance.

HTML:

<nav>
    <ul id="navBar">
        <li><a href="#" title="View"><div class="menu" onClick="select(this)">View</div></a></li>
        <li><a href="#" title="Duplicate"><div class="menu" onClick="select(this)">Duplicate</div></a></li>
        <li><a href="#" title="Edit"><div class="menu" onClick="select(this)">Edit</div></a></li>
        <li><a href="#" title="Delete"><div class="menu" onClick="select(this)">Delete</div></a></li>
    </ul>
</nav>

Javascript:

document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusTopleft = '13px';
document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusBottomleft = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusTopRight = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusBottomRight = '13px';

javascript dynamic css

Answer 1

Answer №1

Your CSS stylesheet will need the following code to achieve rounded corners:

.is-rounded li:first-child {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
}

.is-rounded li:last-child {
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
}

To implement this functionality using Javascript, you can use the following code:

function makeRoundedElement(e) {
   document.querySelector('#navBar').className += 'is-rounded';
}

document.querySelector('#el').addEventListener('click', makeRoundedElement, false);

In the above code snippet, it is assumed that clicking on the element with the id "el" triggers the rounded corner effect.

For a live example, you can check out the demonstration here: http://jsfiddle.net/cgrFe/3/

If you are new to this concept, I recommend starting with some foundational books such as and . The latter resource may be particularly useful for your learning journey.

Answer 2

Your CSS stylesheet will need the following code to achieve rounded corners:

.is-rounded li:first-child {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
}

.is-rounded li:last-child {
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
}

To implement this functionality using Javascript, you can use the following code:

function makeRoundedElement(e) {
   document.querySelector('#navBar').className += 'is-rounded';
}

document.querySelector('#el').addEventListener('click', makeRoundedElement, false);

In the above code snippet, it is assumed that clicking on the element with the id "el" triggers the rounded corner effect.

For a live example, you can check out the demonstration here: http://jsfiddle.net/cgrFe/3/

If you are new to this concept, I recommend starting with some foundational books such as and . The latter resource may be particularly useful for your learning journey.

Answer 3

Answer №2

getElementById specifically needs the id of the element for proper functionality, not a selector. If you are looking to use selectors, you may want to consider using jQuery:

$('ul#navBar li:first-child').css({
    MozBorderRadiusTopleft: '13px'
});

$('navBar li:first-child').css({
    MozBorderRadiusBottomleft: '13px'
});

$('ul#navBar li:last-child').css({
    MozBorderRadiusTopRight: '13px'
});

$('navBar li:last-child').css({
    MozBorderRadiusBottomRight: '13px'
});

Answer 4

getElementById specifically needs the id of the element for proper functionality, not a selector. If you are looking to use selectors, you may want to consider using jQuery:

$('ul#navBar li:first-child').css({
    MozBorderRadiusTopleft: '13px'
});

$('navBar li:first-child').css({
    MozBorderRadiusBottomleft: '13px'
});

$('ul#navBar li:last-child').css({
    MozBorderRadiusTopRight: '13px'
});

$('navBar li:last-child').css({
    MozBorderRadiusBottomRight: '13px'
});

Answer 5

Answer №3

To simplify things, I would first create two CSS classes specifically for rounded corners:

.round-top {
   MozBorderRadiusTopleft:13px;
   MozBorderRadiusTopRight:13px;
}

.round-bottom {
   MozBorderRadiusBottomleft:13px;
   MozBorderRadiusBottomRight:13px;
}

After defining these classes, you can easily add or remove them from the elements you want to style. Here's how you can do it in JavaScript:

var container = document.getElementById(navBar);
container.firstChild.setAttribute("class", "round-top");
container.lastChild.serAttribute("class", "round-bottom");

Using jQuery, the process is even simpler:

$('#navBar li:first-child').addClass('round-top');
$('#navBar li:last-child').addClass('round-bottom');

If you want to implement a full event listener, you can use the following code:

function addBorders(){
  var container = document.getElementById(navBar);
  container.firstChild.setAttribute("class", "round-top");
  container.lastChild.serAttribute("class", "round-bottom");
}

// 'target' represents the element that will trigger the event
target.addEventListener("click", addBorders, false);

Answer 6

To simplify things, I would first create two CSS classes specifically for rounded corners:

.round-top {
   MozBorderRadiusTopleft:13px;
   MozBorderRadiusTopRight:13px;
}

.round-bottom {
   MozBorderRadiusBottomleft:13px;
   MozBorderRadiusBottomRight:13px;
}

After defining these classes, you can easily add or remove them from the elements you want to style. Here's how you can do it in JavaScript:

var container = document.getElementById(navBar);
container.firstChild.setAttribute("class", "round-top");
container.lastChild.serAttribute("class", "round-bottom");

Using jQuery, the process is even simpler:

$('#navBar li:first-child').addClass('round-top');
$('#navBar li:last-child').addClass('round-bottom');

If you want to implement a full event listener, you can use the following code:

function addBorders(){
  var container = document.getElementById(navBar);
  container.firstChild.setAttribute("class", "round-top");
  container.lastChild.serAttribute("class", "round-bottom");
}

// 'target' represents the element that will trigger the event
target.addEventListener("click", addBorders, false);

Answer 7

Answer №4

To utilize jQuery for this task, follow these steps instead of using "border", "3px double red" and incorporate your own styles:

<script type="text/javascript" language="javascript>
         var Menu = {
            rootEl: null,

            Init: function (idRootEl) {
                this.rootEl = $(idRootEl);
                this.initItems();
                this.setFirstElSeleceted();
            },
            setFirstElSeleceted: function () {
                $($(this.rootEl).find('li')[0]).css("border", "3px double red");
            },
            initItems: function () {
                var self = this;

                $(self.rootEl).find('li').each(function (indx) {
                    $(this).click(function () {
                        self.removeSelection();
                        self.setSelected(this);
                    });

                });
            },
            setSelected: function (el) {
                $(el).css("border", "3px double red");
            },
            removeSelection: function () {
                var self = this;
                $(self.rootEl).find('li').each(function (el) {
                    $(this).css("border", "");
                });
            }
        };

        $(function() {
            Menu.Init('ul#navBar');
         });
        </script>

Answer 8

To utilize jQuery for this task, follow these steps instead of using "border", "3px double red" and incorporate your own styles:

<script type="text/javascript" language="javascript>
         var Menu = {
            rootEl: null,

            Init: function (idRootEl) {
                this.rootEl = $(idRootEl);
                this.initItems();
                this.setFirstElSeleceted();
            },
            setFirstElSeleceted: function () {
                $($(this.rootEl).find('li')[0]).css("border", "3px double red");
            },
            initItems: function () {
                var self = this;

                $(self.rootEl).find('li').each(function (indx) {
                    $(this).click(function () {
                        self.removeSelection();
                        self.setSelected(this);
                    });

                });
            },
            setSelected: function (el) {
                $(el).css("border", "3px double red");
            },
            removeSelection: function () {
                var self = this;
                $(self.rootEl).find('li').each(function (el) {
                    $(this).css("border", "");
                });
            }
        };

        $(function() {
            Menu.Init('ul#navBar');
         });
        </script>

Setting border radius for the first child of li dynamically using Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for minimizing the need to copy the entire dojo library each time you create a new Java EE package for deployment on GlassFish

Altering the dimensions of radio buttons

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

Is there anyone available who can assist me in removing records from my Sequelize database?

Example of Using Python and Ajax Together: How to Send a Response using Python?

Is there a way to make the switch case condition shorter?

Text is not visible when hovering over it

What is the best way to stop a UL element from inheriting the height properties of a drop down menu?

Combining AngularJS with Servlets: A Seamless Integration

Having issues with the JavaScript voting system {{bindings}} returning null when clicked?

unveiling the comparison between the revealing module and object literal patterns in encapsulating code

Replace the phrase "add to cart" with "plus" and "minus" in Opencart

Steps for adding products to your shopping cart without using a JavaScript framework:

`How can I troubleshoot path obstacles when transferring files in node.js?`

Floating Ship Animation Using CSS3

The process of re-rendering a component is facilitated by applying various filters

Error occurs when React-router 6 cannot render an error component

Using AngularJS to convert a JSON object into an array

Tips on adjusting the pixel dimensions of an image using a file object

The virtual positioning of list items in React Virtualized