Как изменить элемент на странице ВК и его дизайн с помощю скрипта Tampermonkey?

Question

[Rostyk Ice]

Доброго времени суток, интересует возможно ли изменить елемент на странице сайта vk.com с помощю скриптов в Tampermonkey?
К примеру изменить ширину обрамления прямоугольника с текстом "сторінка" и его позицию на странице и цвет фона.

Answer 1

[Mark Doe]

Например так (и по аналогии менять нужные свойства)

document.querySelector("#myprofile_wrap>a>span").style.color="red";

Или с помощью jQuery
$("#myprofile_wrap>a>span").css({"color":"red"});

Comments

[Rostyk Ice]

вставил в скрипт, не работает :(

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        https://vk.com/*
// @grant        none
// ==/UserScript==

document.querySelector("#myprofile_wrap>a>span").style.color="red";

[Mark Doe]

Rostyk Ice: я бы советовал скрипт запускать хотя бы по document.ready - он у вас исполняется раньше, чем загружается DOM страницы

[Mark Doe]

Rostyk Ice:
puu.sh/kWdvr/90e829038f.png
puu.sh/kWdwF/e6634ba607.png
У меня все работает, проверьте не напутали ли с http/https
P.S. W7x64, Chrome 46

[Rostyk Ice]

Mark Doe: Всеравно не меняет цвет :(

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        https://vk.com/*
// @grant        none
// ==/UserScript==

document.ready.querySelector("#myprofile_wrap>a>span").style.color="red";

[Mark Doe]

Rostyk Ice: (facepalm). Вы куда document.ready-то всунули? Проверьте лучше, работает ли ваш ВКонтакт по https, и скажите пожалуйста ОС\Браузер

[Rostyk Ice]

Mark Doe: Да напутал, спасибо :)
Коментарий написал быстрее просто.

[Rostyk Ice]

Mark Doe: А могли бы вы показать 1 пример как изменить размер обэкта и расположение на странице?

[Rostyk Ice]

Mark Doe: Win 10/ chrome

[Mark Doe]

Rostyk Ice:

document.querySelector("#myprofile_wrap>a>span").style.height="100px";
document.querySelector("#myprofile_wrap>a>span").style.width="100px";
document.querySelector("#myprofile_wrap>a>span").style.positon="absolute";
document.querySelector("#myprofile_wrap>a>span").style.marginLeft="-100px";

очень грубый пример

[Rostyk Ice]

Mark Doe: При навидении засвечивает старое место.

[Mark Doe]

document.querySelector("#myprofile_wrap>a>span").style.marginLeft="-100px"

замените на

document.querySelector("#myprofile_wrap>a").style.marginLeft="-100px"

[Rostyk Ice]

Mark Doe: Кажеться что его ничем не изменить, оно и дальше смещает только текст, но не сам td :(

[Mark Doe]

Rostyk Ice: td тоже можно сместить, но нужно больше манипуляций с кодом. Принцип манипуляции со стилями я вам показал - дальше дело за вами

[Rostyk Ice]

Mark Doe: Ладно, хоть цвет сменю, и на том спасибо!

[Rostyk Ice]

Mark Doe: Но таким методом можно только левую панель изменить и то только 1 елемент, другие не изменяються :(
Заменяю Id но оно не работает.

[Mark Doe]

Rostyk Ice: ну потому что во-первых, кроме id нужно изменить порядок вложености, во-вторых не любой стиль может быть применен к конкретному элементу