How can I disable the rounding of buttons on a website through a Chromium browser?-CodePudding

I'm looking for a way to disable the rounding of all buttons on a website through the developer console. Thus far, nothing seems to work. Can the button style be overridden across the entire script using Javascript?

Thanks in advance.

CodePudding user response：

It's supposed to be something like this:

document.querySelectorAll("button").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

document.querySelectorAll("a").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

This code gets all buttons/a(s) in the html file then it loops foreach of them and it changes the borderRadius style to 0 "none", You can test b.style.backgroundColor = "red"; and it will changes the selected item in the querySelectorAll() background's color to red.

More information about document.querySelectorAll() here! Take a look on the Array.prototype.forEach() function in here !

CodePudding user response：

Im not sure but i did example using vanillaJS for you , are you looking for something like this?

function disableRounding(){
var buttons = document.getElementsByTagName('button');
for (let button of buttons) {
    button.style.borderRadius = 0;
  };
};

function enableRounding(){
var buttons = document.getElementsByTagName('button');
for (let button of buttons) {
    button.style.borderRadius = '50%';
   };
};

.round-button {
    display:block;
    width:150px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #262626;
}

<button href="http://example.com"  onclick="enableRounding()">Enable</button>
<button href="http://example.com"  onclick="disableRounding()">Disable</button>