Greasy Fork

Adjust Element Width on Quora, with animation

Make specific elements less wide on a page

目前为 2024-03-09 提交的版本。查看 最新版本

// ==UserScript==
// @name         Adjust Element Width on Quora, with animation
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Make specific elements less wide on a page
// @author       aspen138
// @match        *://www.quora.com/*
// @icon        https://qsf.cf2.quoracdn.net/-4-images.favicon-new.ico-26-07ecf7cd341b6919.ico
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to adjust width and position with animation
    function adjustWidthAndPosition() {
        // Find elements by the class name and specific inline style
        const elements = document.querySelectorAll('.q-box[style*="width: 356px;"]');

        // Loop through found elements and adjust width and position with animation
        elements.forEach(function(element) {
            element.style.transition = 'width 0.5s ease-in-out, right 0.5s ease-in-out'; // Animate width and right property
            element.style.width = '156px'; // Adjust width as desired
            element.style.position = 'relative'; // Set position to relative
            element.style.right = '0px'; // Move closer to the right, adjust as needed
        });

        // Find elements by the class name and specific inline style
        const elements1 = document.querySelectorAll('.q-box[id="mainContent"]');

        // Loop through found elements and adjust width and position with animation
        elements1.forEach(function(element) {
            element.style.transition = 'width 0.5s ease-in-out'; // Animate width property
            element.style.width = '956px'; // Adjust width as desired
            element.style.position = 'relative'; // Set position to relative
            // Animation for moving to the right is not necessary here as the original code was commented out
        });

    }

    // Run the adjustment function after the page loads
    window.addEventListener('load', adjustWidthAndPosition);
})();